没有JQuery的mouseenter [英] mouseenter without JQuery

问题描述

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

What would be the best way to implement a mouseenter/mouseleave like event in Javascript without jQuery? What's the best strategy for cross browser use? I'm thinking some kind of checking on the event.relatedTarget/event.toElement property in the mouseover/mouseout event handlers?

喜欢听到你的想法。

推荐答案

（完全改变了我的可怕答案。让我们再试一次。）

(Totally changed my terrible answer. Let's try again.)

让我们假设您有以下基础跨浏览器事件方法：

Let's assume you have the following base, cross-browser event methods:

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时，只需将事件附加到
正常mouseover / mouseout事件，然后检查两个重要细节：

Whenever you implement mouseenter/mouseleave, you just attach events to the normal mouseover/mouseout events, but then check for two important particulars:

1. 事件的目标是正确的元素（或正确元素的子元素）


2. 事件的relatedTarget不是目标的子元素

所以我们还需要一个检查一个元素是否是
的子元素的函数：

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

最后一个问题是我们如何删除事件监听器。
实现它的最快方法就是返回我们正在添加的新函数。

The last "gotcha" is how we would remove the event listener. The quickest way to implement it is by just returning the new function that we're adding.

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

So we end up with something like this:

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事件如下所示：

Adding a mouseenter event would look like this:

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

mouseEnterLeave(div, 'mouseenter', listener);

要删除此事件，您必须执行以下操作：

In order to remove the event, you'd have to do something like this:

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

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

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

It's hardly ideal, but all that's left is just implementation details. The important part was the if clause: mouseenter/mouseleave is just mouseover/mouseout, but checking if you're targeting the right element, and if the related target is a child of the target.

这篇关于没有JQuery的mouseenter的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！