Question

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

我看到的问题是触摸/点击屏幕上的许多地方可以打开导航菜单，同时在附近可能存在的任何按钮，链接等触发事件。

到目前为止，我正在尝试使用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子句，为什么不使用事件委托（我在两个月前才知道，在父元素上使用回调处理事件是一个奇特的术语）

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

这是一个更新的Fiddle。我正在将click事件对象记录到控制台，以便您可以查看event.target并查看是否有更适合您需要的内容与

进行比较

如果没有同时触发其他事件，则仅触发Javascript点击/触摸事件？

1 个答案: