Affidabile "mouseenter" senza jQuery

Question

Ho cercato ovunque e non riesco a trovare un evento affidabile mouseenter.

Il più vicino che ho trovato era: 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; 
} 

L'unico problema è che quando faccio funzionare:

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

ottengo 40-47ish (diverso ogni volta) le esecuzioni in una sola volta ogni volta l'ascoltatore spara.

ho provato quello Quirksmode troppo: 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 
} 

Tuttavia questo era estremamente inaffidabile e non solo, ha assunto il genitore/elemento era un DIV. Questo deve essere più dinamico. Questo è per una libreria/script, quindi non posso includere jQuery.

In breve, ho un elemento nascosto finché il mouse non si muove. Una volta spostato, appare finché il mouse si muove OPPURE se il mouse passa sopra l'elemento stesso. Meno codice sarebbe fantastico semplicemente perché solo WebKit non supporta lo mouseenter in modo nativo e sembra essere uno spreco avere quell'enorme porzione di codice dal primo esempio solo per supportare Chrome per una piccola interfaccia utente.

Answer 1

È possibile prelevare semplicemente lo mouseenter e utilizzare invece mousemove? Questo si occupa di mostrarlo quando il mouse si muove. Per renderlo visibile quando si posiziona direttamente sull'elemento, usa invece CSS.

#your_element { 
    display: none; 
} 

#your_element:hover { 
    display: block; 
}