javascript - 仅当没有其他事件同时触发时才触发 Javascript 单击/触摸事件？

Question

我正在尝试制作一个导航菜单，该菜单隐藏在 View 中，但通过触摸/单击屏幕来显示。

我看到的问题是，触摸/单击屏幕上的许多位置可能会打开导航菜单，同时触发可能位于附近的任何按钮、链接等上的事件。

到目前为止，我正在尝试使用 jQuery 中的 :not 子句来处理这个问题。不幸的是，有一些东西不适用于 :not 子句，因为无论您在 body 中单击什么位置，都会发生切换。

HTML:

<div id="NavigationMenu">i'm the navigation menu</div>
<div class="icon-reorder">toggle</div>
<div id="main_content">i'm the main content
  <button type="button">button</button>
</div>​

JS:

$(document.body).on('click', ['body:not(".btn, a, i, button, input, textarea")', '.icon-reorder'], function(){
    console.log('clicked');
    $('#NavigationMenu').toggle();
    $('#main_content').toggle();
});

$('button').on('click', this, function(){
   console.log('button clicked');
});

有人可以帮助编写此代码吗？或者这是否是解决这个问题的正确方法？对我来说，它看起来有点黑客风格。

此导航菜单是我网站的主要菜单，因此烦人的 UI/UX(导航打开太多/太少)会破坏交易。我主要对触摸兼容代码感兴趣，但欢迎任何和所有 UI/UX 建议...

Answer 1

与其使用 :not 子句，为什么不使用事件委托(delegate)(我两个月前才了解到，这是一个奇特的术语，用于在父元素上通过回调处理事件)

$(body).on("click", function(event) {
  if(event.target.type !== "button" && <whatever other conditions>) {
       <toggle menu>
  }
});

这是更新的 Fiddle 。我将点击事件对象记录到控制台，以便您可以查看 event.target 并查看是否有更适合您需要的内容进行比较