Question

我的移动应用程序有一个侧边栏/侧边菜单，当您单击小菜单图标时会打开。

当侧边栏打开时，我使用touchmove eventlistener和e.preventDefault（）阻止滚动;

我还想阻止页面上的任何可点击的div能够运行他们的附加功能（当侧边栏打开时，某些页面仍在视图中，就像facebook应用程序一样）。

我可以检查侧边栏是否在每个功能中打开，如：

if( ! $('#main-wrapper').hasClass('show-right-menu') ){
    // run code
}

但是我需要添加很多功能，有更好的方法吗？

Answer 1

您可以使用.addEventListener并将第3个参数设置为true。这将使其在任何其他click听众之前首先开火。

示例：

document.addEventListener('click', function(e) {
    if(!$('#main-wrapper').hasClass('show-right-menu')) return false; // we don't need this if the menu is closed
    if(!$(e.target).parents(".right-menu").length) { // if the target is not located in the menu, we cancel the click
        e.stopPropagation();
    }
}, true);

以下是一个快速实例http://jsfiddle.net/Hngvx/

Answer 2

在这种情况下，我喜欢使用叠加div，你也可以使用div来淡化看起来不错的内容。

基本上，你用div来覆盖你的内容，并在该div上听取事件然后关闭菜单。

这是一个快速的例子，你可以从中获得这个想法：

http://jsfiddle.net/vSbcQ/5/

<div class="page">
    <div class="header">
        <div class="menu-button">
            menu
        </div>
    </div>
    <div class="content">
        <div class="overlay"></div>
         Lots of wonderful amazing content
    </div>
    <div class="menu">
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
        </ul>
    </div>
</div>

当div具有某个类时，停止函数运行

2 个答案: