我可以将浏览器后退按钮用于其他用途吗？

Question

我正在构建一个采用响应式设计的网站。在移动设备上，页面的许多部分隐藏在 "drawers" 中，可以通过按钮显示。

由于与本机 phone 应用程序非常相似，我注意到一些用户使用他们设备的后退按钮关闭抽屉，但后退按钮指示浏览器返回上一页。

有办法拦截吗？最好只在移动设备上使用，因为我无意全面更改浏览器的后退按钮行为。

我在想：

// call this code when back button was pressed
if( $( '.drawer' ).hasClass( 'open' ) ) {
    // prevent browser going back a page
    $( '.drawer' ).removeClass( 'open' );
} else {
    // keep normal browser behavior
}

能做到吗？

Answer 1

您可以通过多种方式处理后退按钮。有一些相关的问题。

handling back button in android from jquery

jQuery Mobile and Android device back button with build.phonegap.com

jquery mobile, use android hardware back button to close a panel

Answer 2

，这是我的解决方案作为答案，虽然我不确定它是否能解决您的特定问题。

我的建议是使用本机 location.hash 和 hashchange 事件侦听器来打开和关闭元素，允许后退按钮执行相同的操作。这使用默认功能并避免每次打开抽屉时都需要重新加载页面。

我下面的演示主要是格式和样式。重要的部分是 javascript 事件侦听器。它似乎可以使用 Whosebug 的代码片段编辑器，但以防万一：http://jsfiddle.net/jmarikle/jf1aqtdu/

window.addEventListener('hashchange', function(){
    var old;
    if (old = document.querySelector('section.active')) {
        old.classList.remove('active');
    }
    if (old = document.querySelector('nav a.active')) {
        old.classList.remove('active');
    }
    
    if(location.hash !== '') {
        var activeDrawer = document.querySelector(location.hash.replace(/open-/, '')),
            activeNavLink = document.querySelector('[href="'+location.hash+'"]');
        activeDrawer.classList.add('active');
        activeNavLink.classList.add('active');
    }
});

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    background: #c55;
    color: white;
}

nav ul li {
    display: inline;
}

nav ul li a {
    display: inline-block;
    padding: 1em;
    color: inherit;
    text-decoration: none;
}

nav ul li a:hover,
nav ul li a.active {
    background: #A33;
}

section {
    padding: 1em;
    border-top: 1px solid #888;
    border-bottom: 1px solid #000;
    background: #555;
    color: white;
    display: none;
}
section.active {
    display:block;
}
}

<nav>
    <ul>
        <li><a href="#open-about">About</a></li>
        <li><a href="#open-contact">Contact</a></li>
        <li><a href="#open-test">Test</a></li>
    </ul>
</nav>
<section id="about">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>
<section id="contact">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</section>
<section id="test">quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</section>

我可以将浏览器后退按钮用于其他用途吗？

Can I use the browser back button for something else?

jquery

back-button