Question

对于我正在工作的网站的一部分，我有一套可以拔出的侧边栏。为了让用户在使用它们时隐藏它们，我已经设置了一个带有点击事件的div（见下文），这样每当用户点击侧边栏之外的某个位置时，侧边栏就会关闭。然而，我遇到的问题是，click事件处理程序正在抓取事件，运行其方法，然后click事件似乎停止了。我尝试过使用return true和其他一些我在这里和互联网上找到的东西，但点击事件似乎已经死了。

$('.clickaway').click(function() {
        $('body').removeClass(drawerClasses.join(' '));
        return true;
    });

编辑：这是一个例子的小提琴：https://jsfiddle.net/2g7zehtn/1/ 目标是让抽屉出来，仍然可以单击按钮来更改文本的颜色。

Answer 1

使用this somewhat famous SO answer作为指南，您可以绑定到$(document).mouseup();事件并确定是否适用某些“切换”条件：

[编辑] - 更新示例以说明点击包含div之外的链接。

// Resource: https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it

var m = $('#menu');
var c = $('#menuContainer');
var i = $('#menuIcon');

i.click(function() {
  m.toggle("slow");
});

$(document).mouseup(function(e) {

  console.log(e.target); // <-- see what the target is...

  if (!c.is(e.target) && c.has(e.target).length === 0) {
    m.hide("slow");
  }
  
});

#menuIcon {
  height: 15px;
  width: 15px;
  background-color: steelblue;
  cursor: pointer;
}
#menuContainer {
  height: 600px;
  width: 250px;
}
#menu {
  display: none;
  height: 600px;
  width: 250px;
  border: dashed 2px teal;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<a href="#" id="link">I'm a link outside of the container</a>

<div id="menuContainer">
  <div id="menuIcon"></div>
  <div id="menu"></div>
</div>

Answer 2

问题是，您的.clickaway图层位于interactive的所有内容之上，例如button。所以点击按钮，你实际上是在点击图层。

您可以做的一件事是在.clickaway图层上方为要与之互动的元素应用更高的堆叠顺序。例如，如果我们应用position: relative，就像这样：

.show-drawerHotkey .ColorButton {
    position: relative;
}

该元素现在将处于更高的堆叠顺序（因为它位于clickaway之后，我们没有应用z-index来点击）

这是一个小提琴演示：https://jsfiddle.net/2g7zehtn/5/

单击Jquery中的传播失败

2 个答案: