javascript - 没有 JQuery 的鼠标输入

Question

在没有 jQuery 的情况下，在 Javascript 中实现类似 mouseenter/mouseleave 的事件的最佳方法是什么？跨浏览器使用的最佳策略是什么？我在考虑对 mouseover/mouseout 事件处理程序中的 event.relatedTarget/event.toElement 属性进行某种检查？

喜欢听听你的想法。

Answer 1

(完全改变了我糟糕的答案。让我们再试一次。)

假设您有以下基本的跨浏览器事件方法:

var addEvent = window.addEventListener ? function (elem, type, method) {
        elem.addEventListener(type, method, false);
    } : function (elem, type, method) {
        elem.attachEvent('on' + type, method);
    };

var removeEvent = window.removeEventListener ? function (elem, type, method) {
        elem.removeEventListener(type, method, false);
    } : function (elem, type, method) {
        elem.detachEvent('on' + type, method);
    };

(很简单，我知道。)

每当你实现 mouseenter/mouseleave 时，你只需将事件附加到正常的鼠标悬停/鼠标移出事件，但随后检查两个重要的细节:

1. 事件的目标是右元素(或右元素的子元素)
2. 事件的 relatedTarget 不是目标的子对象

所以我们还需要a function that checks whether one element is a child ofanother :

function contains(container, maybe) {
    return container.contains ? container.contains(maybe) :
        !!(container.compareDocumentPosition(maybe) & 16);
}

最后一个“陷阱”是我们将如何删除事件监听器。最快的方法只需返回我们添加的新函数即可实现它。

所以我们最终得到这样的结果:

function mouseEnterLeave(elem, type, method) {
    var mouseEnter = type === 'mouseenter',
        ie = mouseEnter ? 'fromElement' : 'toElement',
        method2 = function (e) {
            e = e || window.event;
            var target = e.target || e.srcElement,
                related = e.relatedTarget || e[ie];
            if ((elem === target || contains(elem, target)) &&
                !contains(elem, related)) {
                    method();
            }
        };
    type = mouseEnter ? 'mouseover' : 'mouseout';
    addEvent(elem, type, method2);
    return method2;
}

添加一个 mouseenter 事件看起来像这样:

var div = document.getElementById('someID'),
    listener = function () {
        alert('do whatever');
    };

mouseEnterLeave(div, 'mouseenter', listener);

要删除该事件，您必须执行以下操作:

var newListener = mouseEnterLeave(div, 'mouseenter', listener);

// removing...
removeEvent(div, 'mouseover', newListener);

这并不理想，但剩下的只是实现细节。这重要的部分是 if 子句:mouseenter/mouseleave 只是mouseover/mouseout，但检查你是否瞄准了正确的元素，如果相关目标是目标的子目标。