可靠的“mouseenter"没有jQuery

Reliable "mouseenter" without jQuery

本文关键字:quot 没有 jQuery mouseenter      更新时间:2023-09-26

我到处找,似乎找不到可靠的mouseenter事件。

我发现最接近的是:mouseenter没有JQuery

function contains(container, maybe) {
  return container.contains ? container.contains(maybe) : !!(container.compareDocumentPosition(maybe) & 16);
}
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);
};
function _mouseEnterLeave(elem, type, method) {
    var mouseEnter = type === 'mouseenter',
        ie = mouseEnter ? 'fromElement' : 'toElement',
        method2 = function (e) {
            e = e || window.event;
            var related = e.relatedTarget || e[ie];
            if ((elem === e.target || contains(elem, e.target)) &&
                !contains(elem, related)) {
                    method();
            }
        };
    type = mouseEnter ? 'mouseover' : 'mouseout';
    _addEvent(elem, type, method2);
    return method2;
}

唯一的问题是,当我运行它:

_mouseEnterLeave(ele, 'mouseenter', function(){
  console.log('test');
});

每次触发侦听器时,我一次执行40-47次(每次不同)。

我也尝试了Quirksmode: http://www.quirksmode.org/js/events_mouse.html#mouseenter

function doSomething(e) {
    if (!e) var e = window.event;
    var tg = (window.event) ? e.srcElement : e.target;
    if (tg.nodeName != 'DIV') return;
    var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
    while (reltg != tg && reltg.nodeName != 'BODY')
        reltg= reltg.parentNode
    if (reltg== tg) return;
    // Mouseout took place when mouse actually left layer
    // Handle event
}

然而,这个是非常不可靠的,不仅如此,它假设父/元素是一个DIV。这需要更有活力。这是一个库/脚本,所以我不能包含jQuery。

简而言之,我有一个隐藏的元素,直到鼠标移动。一旦它移动,只要鼠标移动或鼠标悬停在元素本身上,它就会出现。更少的代码将是很棒的,因为只有WebKit不支持mouseenter原生,这感觉像是浪费了从第一个例子的大量代码,只是为了一个小的UI的东西来支持Chrome。

是否有可能只是废弃mouseenter,而不是使用mousemove ?它负责在鼠标移动时显示它。要使它在元素上直接悬停时保持可见,只需使用CSS。

#your_element {
    display: none;
}
#your_element:hover {
    display: block;
}
相关文章: