Question

我正在使用jQuery处理click元素上的div事件：

$("#id").on('mousedown', function(event) {
    // ...
});

但是这个div元素包含另一个div（让我们称之为#id2）可点击的部分。如果用户点击mousedown，如何阻止#id2事件被触发？现在，当我点击#id2时，mousedown('#id')和onclick('#id2')会触发。

Answer 1

您应该使用Event.stopPropagation()，以便id2的{{1}}事件也不会触发click的{{1}}事件。与此同时，mousedown似乎会在点击id时触发，因此您可以检查Event.target的mousedown属性，以避免在{{1}时执行代码单击。这是一个简单的例子：

id2

id

Answer 2

由于你正在使用jQuery，你可以将mousedown侦听器附加到内部div，然后从中返回false：

$("#inner").click(function() {
  console.log("inner div was clicked");
  return false;
}).on("mousedown", function() {
  console.log("mousedown propagation stops here");
  return false;
});
$("#outer").on("mousedown", function(e) {
  console.log("outer div mousedown")
});

#outer {
  background-color: green;
  padding: 50px;
  display: inline-block;
}

#inner {
  height: 0px;
  padding: 20px;
  background-color: red;
  width: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner">
  </div>
</div>

触发div中的div

2 个答案: