"mouseenter" confiable sin jQuery

Question

He estado buscando en todas partes y parece que no puedo encontrar un evento confiable mouseenter.

Lo más cercano que encontré fue: mouseenter without 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; 
} 

El único problema es que cuando lo funciono:

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

consigo 40-47ish (diferente cada vez) las ejecuciones a la vez cada vez el oyente dispara.

He probado el uno Quirksmode también: 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 
} 

Sin embargo éste era extremadamente fiable y no sólo eso, se asumió el/elemento padre era un DIV. Esto tiene que ser más dinámico. Esto es para una biblioteca/script, así que no puedo incluir jQuery.

En resumen, tengo un elemento que está oculto hasta que se mueve el mouse. Una vez que se mueve, aparece durante el tiempo que el mouse se mueve O si el mouse está sobre el elemento. Menos código sería increíble simplemente porque WebKit no es compatible con mouseenter de forma nativa y se siente como un desperdicio tener ese gran trozo de código del primer ejemplo solo para apoyar a Chrome con una pequeña interfaz de usuario.

Answer 1

¿Es posible simplemente eliminar el mouseenter y en su lugar usar mousemove? Eso se encarga de mostrarlo cuando el mouse se está moviendo. Para que permanezca visible cuando se coloca directamente sobre el elemento, simplemente use CSS en su lugar.

#your_element { 
    display: none; 
} 

#your_element:hover { 
    display: block; 
}