自定义“mouseenter"函数没有触发

Custom "mouseenter" function doesn't fire

本文关键字：函数 mouseenter quot 自定义      更新时间：2023-09-26

这是JSFiddle。

我试图使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

我的期望是mouseover事件将在元素B上触发，并向上冒泡到元素a。然而，情况似乎并非如此。我用Chrome 13和Firefox 3.6进行了测试，得到了同样的结果。我搞砸了什么吗?

如果你不反对使用jQuery:

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

在你的JSFiddle中试过了，它工作了:当你进入绿色方块时，它不会开火;当你从外面进入红色方块时，它会开火;当你从绿色方块进入红色方块时，它会开火。这就是你想要的，对吗?

新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/

我的自定义函数没有触发的原因是它没有工作。

我更新了小提琴，显示一切都是应该的。

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

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

所以我把wrap函数中的if代码改成了: 
if ((elem === e.target || contains(elem, e.target)) &&
    !contains(elem, e.relatedTarget)) {
        e.stopPropagation();
        method.call(elem, e);
}
相关文章：