单击子元素时不要触发父事件
Don't trigger the parent event when clicking on the child element
请参阅我的片段,当我单击父元素时,会显示子元素,但是当我单击子元素时,父元素事件似乎也与子元素事件一起触发,任何想法在单击时仅触发父元素事件,在单击时仅触发子元素事件(不得冒泡父元素事件)? 任何想法, 请帮助,线索,建议,建议?
$(document).ready(function(){
$("#child").hide();
$("#parent").click(function(){
alert("parent event is triggered");
$("#child").show();
});
$("#child").click(function(){
alert("child event is triggered");
});
});
#parent{
padding: 15px;
border: 3px dotted #cccccc;
}
#child{
padding: 4px;
border: 1px solid blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
This is parent element, click to show the child element
<div id="child">Child</div>
</div>
$("#child").click(function(){
alert("child event is triggered");
event.stopPropagation();
});
您是否尝试过添加 stopPropogation
$("#child").click(function(event){
alert("child event is triggered");
event.stopPropagation();
});
参考
相关文章:
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 将事件聚焦/模糊在可编辑内容的元素上
- 如何使用jquery迭代具有相同属性的html元素并查找onclick事件
- 在IE8中不起作用的元素上触发单击事件
- 正在ng重复元素上添加事件
- 单击p元素时的javascript触发事件
- 存在每个时间元素的javascript事件
- Firefox:点击并更改未附加到文档树中的复选框元素上的事件
- 有没有一种方法可以让内联事件处理程序在元素创建后立即执行
- 将jQuery事件应用于所有类元素
- 在IE8上使用jQuery克隆HTML5元素和事件
- 单击其他元素时,我如何使用 jQuery 忽略更改事件
- 访问代码生成的输入元素上的keyup事件
- 如何查明鼠标按下事件是否发生在滚动条上或元素中的其他任何位置
- 当元素到达屏幕上的某个位置时触发事件
- Mootools:如何在点击时保持元素高亮显示并停止所有事件
- 将事件侦听器添加到文档,而不是签入元素存在,然后添加事件侦听器
- JQuery:使用clone()生成的元素不采用原始的事件属性
- 从其他元素上的单击事件访问image src属性
- 触发“三个”的点击事件.元素