jQueryを使用しない信頼できる「マウスセンター」

Question

どこでも探していましたが、信頼性の高いmouseenterイベントが見つからないようです。

は、私が見つけた最も近いました：

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

私は（毎回異なる）毎に1回で実行40-47ish取得：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; 
} 

唯一の問題は、私はそれを実行したときにということですリスナーが鳴ります。

は私もQuirksmodeのいずれかを試してみました：

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 
} 

http://www.quirksmode.org/js/events_mouse.html#mouseenterが、しかしこの1つは非常に信頼性が低くだったとそれだけでなく、それは親/要素がDIVだったと仮定しました。これはより動的でなければなりません。これはライブラリ/スクリプト用ですので、jQueryをインクルードできません。

要するに、マウスが動くまで隠されている要素があります。一度移動すると、マウスが移動している間、またはマウスが要素自体の上にマウスを置いている場合に表示されます。 WebKitだけがmouseenterをネイティブにサポートしておらず、最初の例の巨大なコードを小さなUIのためにサポートするのは無駄だと感じているので、コードはすごく簡単です。

Answer 1

代わりにmouseenterをスクラップして代わりにmousemoveを使用できますか？それは、マウスが動いているときにそれを見せてくれます。要素上に直接ホバリングしても見えるようにするには、代わりにCSSを使用してください。

#your_element { 
    display: none; 
} 

#your_element:hover { 
    display: block; 
}