jquery - 为什么 mouseenter/mouseleave 会影响 .click 事件？

Question

我正在制作一个评分系统，我想要它，所以当你点击每个单词时，它会完全透明。此外，当您将鼠标悬停在每个单词上时，它之前的单词也会突出显示。

基本上，我唯一遇到的问题是 .click(); 事件不起作用。仅当您取出上面的所有代码时它才有效：

    // This isn't working:
$("#poor").click(function () {
    $(this).css("opacity", "1");
});

$("#good").click(function () {
    $(this).css("opacity", "1");
});

$("#great").click(function () {
    $(this).css("opacity", "1");
});

jsFiddle 演示:: http://jsfiddle.net/MatthewKosloski/rjFpn/1/

Answer 1

单击正确地将不透明度设置为 1，但之后您的 mouseleave 再次将不透明度设置为 0.50。

所以 mouseleave 正在取消您的点击。

Answer 2

现在，当您处理事件时，您将事件称为“this”。

将您的代码更改为如下所示：

$("#poor").click(function (event) {
    var el = event.target || event.srcElement;
    $(el).css("opacity", "1");
});

编辑：原来我错了，原因是当你离开鼠标时，你正在改变元素的 css 属性，在用户点击之后，如果你为用户点击一个元素设置了一个标志，你可以防止 mouseleave 事件触发

这是 JSFiddle http://jsfiddle.net/jDjSu/