Question

我正在尝试使用以下功能让mouseenter在Chrome，Firefox等上运行：

var addMouseenter = (function () {
    var contains = function (parent, elem) {
            return parent.contains ? parent.contains(elem) :
                !!(parent.compareDocumentPosition(elem) & 16);
        },
        wrap = function (elem, method) {
            return function (e) {
                if (elem === e.target && !contains(elem, e.relatedTarget)) {
                    method.call(elem, e);
                }
            };
        };

    return function (elem, listener) {
        var listener2 = wrap(elem, listener);
        elem.addEventListener('mouseover', listener2, false);
    };
}());

在遇到这种特殊情况之前，一切正常：

元素A具有其中一个自定义mouseenter侦听器
元素A包含元素B
元素B正对着元素A的边缘
您在同一边缘输入元素A

我的期望是在元素B上触发mouseover事件并冒泡到元素A.但是，情况似乎并非如此。我使用Chrome 13和Firefox 3.6进行了测试，结果相同。我搞砸了什么吗？

Answer 1

如果你不反对使用jQuery：

$(document).ready(function() {
    $('#first').mouseover(function (e) {
        if ($(e.target).attr('id') != 'second') {
            alert('hello');
        }
    });
});

在你的JSFiddle中试过它并且它有效：当你进入绿色方块时，它不会开火;当你从外面进入红场时，它会发射;当你从绿色方块进入红色方块时它会发射。这就是你想要的吗？

new JSFiddle

或者保持你的javascript方法：

// Misc set-up stuff
var greet = function () { alert('Hi, my name is "' + this.id + '."'); },
    first = document.getElementById('first'),
    second = document.getElementById('second');

// The Actual Function
var addMouseenter = (function () {
    var contains = function (parent, elem) {
            return parent.contains ? parent.contains(elem) :
                !!(parent.compareDocumentPosition(elem) & 16);
        },
        wrap = function (elem, method) {
            return function (e) {
                //if (elem === e.target && !contains(elem, e.relatedTarget)) {
                if (elem === e.target && (e.target != second)) {
                    method.call(elem, e);
                }
            };
        };

    return function (elem, listener) {
        var listener2 = wrap(elem, listener);
        elem.addEventListener('mouseover', listener2, false);
    };
}());

// GOGOGO
addMouseenter(first, greet);

http://jsfiddle.net/AUc88/

Answer 2

我的自定义函数未触发的原因是因为它不起作用。

I updated the fiddle表明一切都应该如此。

我的错误只是检查e.target是否与我附加监听器的元素相同。我需要检查的是，如果e.target是元素的孩子，那么或是否相同。

当你快速地将鼠标放在两个方块上时，它只会在内部方块上注册mouseover事件，并且由于我的侦听器附加到外部事件上，elem === e.target测试失败了。 / p>

所以我将if函数中的wrap代码更改为：

if ((elem === e.target || contains(elem, e.target)) &&
    !contains(elem, e.relatedTarget)) {
        e.stopPropagation();
        method.call(elem, e);
}

自定义“mouseenter”功能不会触发

2 个答案: