javascript - 在一个div中触发div

Question

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

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

但是这个 div 元素包含另一个带有可点击部分的 div(我们称它为 #id2)。如果用户单击 #id2，我如何防止触发 mousedown 事件？现在，当我点击 #id2 时，mousedown('#id') 和 onclick('#id2') 将触发。

Answer 1

你应该使用 Event.stopPropagation()这样 id2 的 click 事件就不会同时为 id 触发 mousedown 事件。同时，当点击 id2 时，mousedown 似乎仍会触发，因此您可以检查 Event.target的 id 属性以避免在单击 id2 时执行代码。这是一个简单的例子:

$("#id").on('mousedown', function(event) {
  if (event.target.id === 'id2') {
    console.log('Mousedown evet fired from id2, aborting...');
    return;
  }
  console.log('Mousedown on id');

});

$("#id2").on('click', function(event) {
  event.stopPropagation();
  console.log('Click on id2');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="id">
  ID 1
  <div id="id2">
    ID 2
  </div>
</div>