jQueryを使用しない信頼性の高い「マウスセンター」

私はどこからでも見てきましたが、信頼できる mouseenter イベントを見つけることはできません。

The closest I found was: 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;
}

唯一の問題は、私がそれを実行するときです:

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

私はリスナーが発砲するたびに一度に40から47ish(毎回異なる)処刑を受ける。

I tried the Quirksmode one too: 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のためにサポートするのは無駄だと感じるため、コードはすごく簡単です。

6
これはMooToolsにjQueryを動作させるようなものだから...これはかなり大きなMarkdownエディタライブラリなので、だけマウスを動かすスクリプトを30k追加するのはばかげている。
追加された 著者 Oscar Godson,
そして、私は部品を引き出そうとしましたが、jQueryのイベントシステムは非常にモジュール化されており、すべてのコードを正しくまとめることはできません。
追加された 著者 Oscar Godson,
フープを考えると、あなたはこれをうまく動作させようとしています - なぜjQueryだけではないのですか?少なくとも mouseenter の扱いについては、ソースコードの関連部分を抜き出すことができます。
追加された 著者 Matt Ball,
ライブラリ/スクリプトでjQueryが必要なのはなぜですか?
追加された 著者 SLaks,

1 答え

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

#your_element {
    display: none;
}

#your_element:hover {
    display: block;
}
3
追加された
うーん、良いアイデア。私はこれを試してみましょう...
追加された 著者 Oscar Godson,
追加する必要がありました!JavaScriptを隠すことが重要ですが、それはうまくいきました!追加のJSは全くありません:)
追加された 著者 Oscar Godson,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript