jQuery-div中的div，如何在单击内部时仅运行1 click事件
[英]jQuery - div inside div, how to run only 1 click event when inside has been clicked
问题描述
I have a div inside div. 
我在div内有一个div。 If the inside div has been clicked (closeme div), I dont want to run the other div's (container div) click event. 如果内部div已被单击（closeme div），则我不想运行其他div（容器div）的click事件。 How can I do that ? 我怎样才能做到这一点 ？
html html
<div id="container">
content
<div id="closeme"></div>
</div>
js js
$(document).on('click', '[id="container"]' ,function(){
alert("I am clicked");
}
$(document).on('click', '[id="closeme"]' ,function(){
alert("I am clicked");
}
3 个解决方案
解决方案1
2 已采纳 2016-09-23 04:51:11
$(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>
Use event.stopPropagation() 使用event.stopPropagation（）
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
解决方案2
2 2016-09-23 05:00:01
Do a if to test if the target is #closeme 如果是否测试目标是否为#closeme
$(document).on('click', '[id="closeme"]', function(event) {
if ($(event.target).is('[id="closeme"]')) {
alert("coloseme clicked");
}
});
解决方案3
1 2016-09-23 04:58:15
Like others have just mentioned. 就像其他人刚刚提到的那样。 You have to stop the event propagation. 您必须停止事件传播。 Here is a full working example. 这是一个完整的工作示例。
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.