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

Question

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

当侧边栏打开时，我使用 touchmove eventlistener 和 e.preventDefault() 防止滚动；

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

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

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

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

Answer 1

您可以使用.addEventListener并将第三个参数设置为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>