Надежный «mouseenter» без jQuery

Я везде искал и не могу найти надежного события 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 изначально, и кажется пустой тратой иметь этот огромный кусок кода из первого примера только для поддержки Chrome для небольшого UI.

6
задан Community 23 May 2017 в 12:34
поделиться