如何防止jquery中的父级dblclick
如何防止jquery中的父级dblclick
提问于 2018-01-16 07:53:52
您可以看到下面的代码，我有两个事件：
1- dblclick on target1.
2- dblclick on target2.
Expect结果：当我在target2上运行dblclick事件时，我不想在target1上运行dblclick事件。我该怎么做？
$("#target1").dblclick(function() {
console.log("I don't want this click when dbclick on target2.");
});
$("#target2").dblclick(function() {
console.log("Click 2.");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Screenshot" style="height:200px; width:300px;">
<table style="width:100%;">
<tr>
<td id="target1">
target1
<p id="target2">target2 </p>
</td>
</tr>
</table>
</div>
回答 3
Stack Overflow用户
回答已采纳
发布于 2018-01-16 07:55:31
您可以向第二个单击函数添加一个e (事件)参数，然后在第二个单击事件中使用e.stopPropagation();。这可以防止单击事件冒泡，当单击子元素时，父单击函数无法运行。
$("#target1").dblclick(function() {
console.log("I don't want this click when dbclick on target2.");
});
$("#target2").dblclick(function(e) {
console.log("Click 2.");
e.stopPropagation();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Screenshot" style="height:200px; width:300px;">
<table style="width:100%;">
<tr>
<td id="target1">
target1
<p id="target2">target2 </p>
</td>
</tr>
</table>
</div>
Stack Overflow用户
发布于 2018-01-16 07:56:08
在target2中，您需要捕获事件并防止其冒泡。您可以通过在stopPropagation上调用event来做到这一点。
$( "#target2" ).dblclick(function(event) {
event.stopPropagation();
console.log( "Click 2." );
});请参阅这链接。
Stack Overflow用户
发布于 2018-01-16 07:57:15
尝尝这个
$("#target1").dblclick(function() {
console.log("I don't want this click when dbclick on target2.");
});
$("#target2").dblclick(function(e) {
e.stopPropagation();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Screenshot" style="height:200px; width:300px;">
<table style="width:100%;">
<tr>
<td id="target1">
target1
<p id="target2">target2 </p>
</td>
</tr>
</table>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48276397
复制相关文章
相似问题
腾讯云开发者
