Question

我正在建立一个响应式设计的网站。在移动设备上，页面的许多部分都隐藏在＆＃34;抽屉＆＃34;中，可以通过按钮显示。

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

有没有办法拦截这个？最好只在移动设备上，因为我不打算全面改变浏览器的后退按钮行为。

我想的是：

// 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

Per your request，这是我的解决方案，虽然我不确定它会解决您的具体问题。

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

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

＆＃13;

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');
    }
});

＆＃13;

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;
}
}

＆＃13;

<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>

＆＃13;

Answer 2

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

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

我可以使用浏览器后退按钮吗？

2 个答案: