javascript 按钮上的点击事件正在发送一个图标作为目标？

Click event on button is sending an icon as the target?

提问by bbengfort

I am having an issue very similar to: "Jquery 'click' not firing when icon is on button"however the resolution for that post is not providing a solution for me, so I think something different may be going on.

我遇到了一个与以下问题非常相似的问题：“当图标位于按钮上时，Jquery 'click' 不会触发”但是该帖子的分辨率并没有为我提供解决方案，所以我认为可能会发生一些不同的事情。

The essential problem is that I have a button with an icon in it. When I click on the button (e.g. the text) the event target is the button element; however when I click on the icon, the event target is the icon object. This unfortunately is extremely annoying as I am storing data values on my button that I would like access to.

基本问题是我有一个带有图标的按钮。当我点击按钮（例如文本）时，事件目标是按钮元素；但是，当我单击图标时，事件目标是图标对象。不幸的是，这非常烦人，因为我将数据值存储在我想要访问的按钮上。

Here is the HTML:

这是 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>

And here is the Javascript:

这是 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);

Clicking on the text ("Up Vote!" or "Down Vote!") results in the following console output:

单击文本（“赞成票！”或“反对票！”）会导致以下控制台输出：

1
BUTTON
-1 
BUTTON

Clicking on the icon (, etc.) results in the following console output:

单击图标（等）会产生以下控制台输出：

NaN
I
NaN
I

Even though I've registered the handle on elements with selector "button.vote-button". Does anyone know why this is happening? I'd hate to have to give data attributes to the icons.

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

采纳答案by Anthony Grist

It's caused by event propagation. You click on the icon, which is inside the button, so the clickevent propagates up through the DOM from the icon, to the button, all the way up to the document. This results in your clickevent handler code being executed.

它是由事件传播引起的。您单击按钮内的图标，因此click事件通过 DOM 从图标向上传播到按钮，一直到文档。这会导致您的click事件处理程序代码被执行。

If the issue is that you just want the reference to the button every time that code runs, but you still want it to trigger when you click on the icon instead of the text, you just need to use thisrather than event.target:

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

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

jQuery will make sure that thisalways refers to the button, even if the actual event.targetelement is an element inside it.

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

回答by Han

Use event.currentTargetwhich is always the object listening for the event; event.targetis the actual target that received the event which is not what you want in this case since it could be the icon.

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

With event.currentTargetif the user clicks on the icon, it'll bubble the event up to the object listener which is the button in your case. If the user clicks the button it'll still work because again the object listener is your button.

随着event.currentTarget如果在图标的用户点击，它就会冒泡事件对象最多听众是你的情况的按钮。如果用户单击按钮，它仍然可以工作，因为对象侦听器也是您的按钮。

回答by Jai

update this because $(event.target)is not always buttonfor this you have to use ternary operator as suggested or replace $(event.target)with $(this)which is always buttonin the context of selector:

更新这个，因为$(event.target)并不总是button为此你必须按照建议使用三元运算符或替换$(event.target)为$(this)它总是button在选择器的上下文中：

function sendVote(event) {
    event.stopPropagation(); 
    var $btn = $(event.target).is('button') ? $(event.target) : $(event.target).parent();
    console.log(parseInt($btn.data('vote')));
    console.log($btn.prop('tagName'));
}
$(function () {
    $('body').on('click','button.vote-button', sendVote);
});

---

---

Demo fiddle

演示小提琴

---

---

or with $(this)which is always buttonbecause the event is bound to it and if you click on any child of it then eventwill bubble up to the dom tree and event bound to button gets executed:

或者$(this)总是button因为事件绑定到它，如果你点击它的任何子项，那么event将冒泡到 dom 树并且绑定到按钮的事件被执行：

function sendVote(event) {
    var $btn = $(this);  // <-----------------change just here
    console.log(parseInt($btn.data('vote')));
    console.log($btn.prop('tagName'));
}

回答by BlueStory

Simple CSS solution:

简单的 CSS 解决方案：

button > * {
  pointer-events: none;
}

回答by JF it

How bout just checking within the function if the tagname is I, and if it is, getting the parent as your $btn. http://jsfiddle.net/jFIT/qZgYU/3/

如何在函数中检查标记名是否为 I，如果是，则将父项作为您的 $btn。 http://jsfiddle.net/jFIT/qZgYU/3/

$('body').on('click', 'button.vote-button', function() {
 var $btn = $(this).prop('tagName').toLowerCase() == "i" ? $(this).parent() : $(this);
 console.log(parseInt($btn.data('vote')));
 console.log($btn.prop('tagName'));
});