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

Question

我在div内有一个div。 如果内部div已被单击（closeme div），则我不想运行其他div（容器div）的click事件。 我怎样才能做到这一点？

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

如果是否测试目标是否为#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 click事件

问题描述

3 个解决方案

解决方案1
2 已采纳 2016-09-23 04:51:11

解决方案2
2 2016-09-23 05:00:01

解决方案3
1 2016-09-23 04:58:15

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

问题描述

3 个解决方案

解决方案1 2 已采纳 2016-09-23 04:51:11

解决方案2 2 2016-09-23 05:00:01

解决方案3 1 2016-09-23 04:58:15

解决方案1
2 已采纳 2016-09-23 04:51:11

解决方案2
2 2016-09-23 05:00:01

解决方案3
1 2016-09-23 04:58:15