给定一些简单的 HTML,例如,其中一个元素具有 onclick
函数,并且它的子元素也具有 onclick
函数:
<div style='background-color:blue;width:500px;height:500px;'
onclick='thing1();'>
<div style='background-color:red;width:100px;height:100px;'
onclick='thing2(57);'></div>
</div>
正确的方法是什么,以便当用户单击子元素时,仅执行子元素的 onclick
而不是父元素的,但当单击父元素时,则执行 onclick
仍然执行吗?我认为 event.stopPropagation()
是正确的方法,但由于我将参数传递给函数 thing2()
,我似乎无法也通过该事件。例如:
function thing2(a,ev) {
// Do something with a
ev.stopPropagation();
}
不起作用,失败并出现错误TypeError: ev is undefined
。
JQuery 没问题。
最佳答案
事件是第一个参数。
function thing2(ev) {
var a = ev.target
ev.stopPropagation()
}
其次,最好不要使用onclick=
。相反,给你的 div 类或 id 并执行如下操作:
<div class="thing-1" data-thingy="57">
<div class="thing-2" data-thingy="65"></div>
</div>
<script>
$('.thing-1').click(function (ev) {
ev.stopPropagation()
parseInt($(ev.target).data('thingy'), 10) // 57
})
$('.thing-2').click(function (ev) {
ev.stopPropagation()
parseInt($(ev.target).data('thingy'), 10) // 65
})
</script>
关于javascript - 在传递参数的地方运行子级的 Onclick 但不运行父级的 Onclick,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38131352/