[英]jQuery get clicked div only and not children
我不止一次嘲笑这个问题,我不知道我已经尝试了我在谷歌和堆栈溢出上能找到的所有东西,但没有任何效果。
发生的事情是有时我得到span
,有时得到div
- 为什么?
$(".bind-key").on("click", (ev) => { console.log(ev.target) });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bkey-1" class="bind-key cursor-pointer bg-gray-700 text-gray-400 w-max px-2 p-1 rounded-md"> <span>KEY</span> </div>
输出:
问题是因为target
将是引发事件的元素。 由于事件冒泡,在您的示例中,如果您直接单击“KEY”一词,则可能是span
,或者如果您单击右侧的空格,则可能是div
。
要更改此行为,请使用currentTarget
属性。 这将始终引用事件绑定到的元素,无论哪个子元素导致事件在 DOM 中冒泡。 试试这个:
$(".bind-key").on("click", e => { console.log(e.currentTarget); // this will always be the .bind-key element });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="bkey-1" class="bind-key cursor-pointer bg-gray-700 text-gray-400 w-max px-2 p-1 rounded-md"> <span>KEY</span> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.