点击事件按钮是否正在发送图标作为目标？

Question

我有一个非常类似的问题:"Jquery'点击'当图标在按钮上时没有触发"但是该帖子的分辨率并没有为我提供解决方案,所以我认为可能会发生一些不同的事情.

关键问题是我有一个带有图标的按钮.当我点击按钮(例如文本)时,事件目标是按钮元素; 但是当我点击图标时,事件目标就是图标对象.不幸的是,这非常烦人,因为我将数据值存储在我想要访问的按钮上.

这是HTML:

<button class="btn btn-success vote-button" id="btnUpVote" type="button" data-vote="1">
    <i class="fa fa-thumbs-up"></i>
    Up Vote!
</button>

<button class="btn btn-danger vote-button" id="btnDownVote" type="button" data-vote="-1">
    <i class="fa fa-thumbs-down"></i>
    Down Vote!
</button>

这是Javascript:

function sendVote(event) {
    var $btn = $(event.target);
    console.log(parseInt($btn.data('vote'));
    console.log($btn.prop('tagName'));
}

$('body').on('click', 'button.vote-button', sendVote);

单击文本("Up Vote!"或"Down Vote!")会产生以下控制台输出:

1
BUTTON
-1 
BUTTON

单击图标(等)将导致以下控制台输出:

NaN
I
NaN
I

即使我已经使用选择器"button.vote-button"在元素上注册了句柄.有谁知道为什么会这样？我不想必须为图标提供数据属性.

Answer 1

使用event.currentTarget始终是侦听事件的对象; event.target是接收事件的实际目标,在这种情况下不是你想要的,因为它可能是图标.

随着event.currentTarget如果用户点击该图标时,它会冒泡的事件对象最多听众是你的情况的按钮.如果用户单击该按钮,它仍然可以工作,因为对象监听器再次是您的按钮.

Answer 2

简单的 CSS 解决方案：

button > * {
  pointer-events: none;
}

Answer 3

这是由事件传播引起的。您单击按钮内的图标，click事件将通过DOM从图标传播到按钮，直至整个文档。这将导致click事件处理程序代码被执行。

如果问题是您只希望在每次代码运行时都对按钮进行引用，但是仍然希望在单击图标而不是文本时触发按钮，则只需使用this而不是event.target：

var $btn = $(this);
...

jQuery将确保this始终引用按钮，即使实际event.target元素是其中的元素。