JavaScript および JQuery_javascript スキルを使用したマウス イベントのバブリング処理

単純なマウス移動イベント:

入力

コードをコピー コードは次のとおりです:

マウス入力: 泡立ちなし
マウスオーバー: バブル

マウス ポインターが選択された要素またはそのサブ要素を通過するたびに、mouseover イベントがトリガーされます
Mouseenter イベントは、マウス ポインターが選択された要素

を通過するときにのみトリガーされます。

引っ越し

コードをコピー コードは次のとおりです:

マウスリーブ: 泡立ちなし
マウスアウト: 泡立つ

マウス ポインターが選択した要素または子要素から離れても、mouseout イベントがトリガーされます
Mouseleave イベントは、マウス ポインターが選択された要素から離れた場合にのみトリガーされます

ケースを通して問題を観察してみましょう:

mouseout イベントをネストされたレベルにバインドすると、mouseout イベントが想像していたものと異なることがわかります

コードをコピー コードは次のとおりです:

外側の子要素

子要素

0

0

mouseout イベントに問題が見つかりました:

1.泡立ちを防ぐことができない
2. 内部の子要素 ​​

でもトリガーされます。

同じ問題がマウスオーバー イベントにも存在します。では、stopPropagation メソッドが失敗した場合にバブリングを停止するにはどうすればよいでしょうか?

1. マウスオーバーとマウスアウトの繰り返しのトリガーを防ぐために、ここではイベント オブジェクトの属性 RELATEDTarget を使用して、マウスオーバー イベントとマウスアウト イベントのターゲット ノードの関連ノードの属性を決定します。簡単に言うと、mouseover イベントがトリガーされると、relationTarget 属性はマウスが離れたばかりのノードを表し、mouseout イベントがトリガーされると、マウスの移動先のオブジェクトを表します。 MSIE はこの属性をサポートしていないため、fromElement と toElement という代替属性があります。
2. この属性を使用すると、マウスがどのオブジェクトから移動し、どこに移動しているかを明確に知ることができます。このようにして、関連付けられたオブジェクトがイベントをトリガーしたいオブジェクトの内部にあるのか、それともオブジェクト自体であるのかを判断できます。この判断を通じて、本当にイベントをトリガーするかどうかを合理的に選択できます。
3. ここでは、オブジェクトが別のオブジェクトに含まれているかどうかを確認するためのメソッド、contains メソッドも使用します。 MSIEとFireFoxはそれぞれチェックメソッドを提供しており、ここに関数がカプセル化されています。

jQueryの処理は全く同じです

コードをコピー コードは次のとおりです:

jQuery.each({
        マウス入力: "マウスオーバー",
        マウス離れる: "マウスアウト",
        ポインタ入力: "ポインタオーバー",
        pointerleave: "ポインタアウト"
    }, function(orig, fix) {
        jQuery.event.special[orig] = {
            delegateType: 修正、
            バインドタイプ: 修正、

ハンドル: function(event) {
                var ret、
                    ターゲット = これ、
                    関連 = イベント.関連ターゲット,
                    ハンドルObj = イベント.ハンドルObj;

// mousenter/leave の場合、関連するものがターゲットの外にある場合はハンドラーを呼び出します。
                // 注意: マウスがブラウザ ウィンドウから離れた/ブラウザ ウィンドウに入った場合は、relativeTarget はありません
                if (!関連 || (関連 !== ターゲット && !jQuery.contains(ターゲット, 関連))) {
                    イベント.タイプ = handleObj.origType;
                    ret = handleObj.handler.apply(this, argument);
                    イベント.タイプ = 修正;
                }
                return ret;
            }
        };
    });