Question

我在div里面有一个div。如果单击了内部div（closeme div），我不想运行其他div（容器div）单击事件。我怎么能这样做？

HTML

<div id="container">
content
<div id="closeme"></div>
</div>

JS

$(document).on('click', '[id="container"]' ,function(){
alert("I am clicked");
}

$(document).on('click', '[id="closeme"]' ,function(){
alert("I am clicked");
}

Answer 1

$(document).on('click', '[id="container"]', function(e) {
  e.stopPropagation();
  alert("I am container");
})

$(document).on('click', '[id="closeme"]', function(e) {
  e.stopPropagation();
  alert("I am closeme");
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  content
  <div id="closeme">qwe</div>
</div>

使用event.stopPropagation()

描述：防止事件冒泡DOM树，防止任何父处理程序被通知事件。

Answer 2

执行if以测试目标是否为#closeme

 $(document).on('click', '[id="closeme"]', function(event) {
     if ($(event.target).is('[id="closeme"]')) {
        alert("coloseme clicked");
     }
    });

Answer 3

像其他人刚才提到的一样。您必须停止事件传播。这是一个完整的工作示例。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
  <div id="container">
    content
    <div id="closeme">Inner Div</div>
  </div>
</body>
  <script>
    $(document).on('click', '[id="container"]', function(event) {
      alert("container clicked");
    });

    $(document).on('click', '[id="closeme"]', function(event) {
      event.stopPropagation();
      alert("coloseme clicked");
    });
  </script>
</html>

jQuery - div内部的div，如何在单击内部时仅运行1次单击事件

3 个答案: