4

マウスが elementA から移動して elementB に移動したとします。

イベントが発生する順序はどうなりますか?

4

2 に答える 2

3

mousemove、mouseleave、mouseout、mousemovex X、mouseenter、mouseover、mousemoveその他など...

それが私の最善の推測です...

しかし、私は少し間違っていました。必要なイベントを追加します (この例では jQuery を使用しています。プレーンな JavaScript でもこれを行うことができますが、私はこれに多くの時間を費やしたくありませんでした)。

わかりました、コードは次のとおりです。

$(document).ready(function(e) {
    $('.canary').on('mouseout mouseleave mouseenter mouseover', function(event){
        $('#test').text($('#test').text() + ', ' + event.type)      });
});

これがあなたのCSSです：

.canary{
    width:200px;
    height:100px;
    background-color:#066
    }

あなたのHTML

<textarea name="test" id="test" cols="200" rows="10"></textarea>
<div class='canary'></div>
<br /><br />
<div class='canary'></div>

ライブデモはこちら

于 2012-04-04T12:55:35.647 に答える
0

仕様では、これらのイベントの順序にいくつかの要件が課されていますが、状況によっては、順序がブラウザに依存しているようです。https://www.w3.org/TR/DOM-Level-3-Events/#events-mouseevent-event-orderを参照してください。

この仕様で定義されている特定のマウス イベントは、互いに関連する設定された順序で発生する必要があります。以下は、ポインティング デバイスのカーソルが要素の上に移動したときに発生しなければならないイベント シーケンスを示しています。

Event Type  Element Notes
1   mousemove       Pointing device is moved into element A...
2   mouseover   A   
3   mouseenter  A   
4   mousemove   A   Multiple mousemove events

Pointing device is moved out of element A...
5   mouseout    A   
6   mouseleave  A

ポインティング デバイスが要素 A に移動され、次にネストされた要素 B に移動され、再び元に戻された場合、次の一連のイベントが発生する必要があります。

Event Type  Element Notes
1   mousemove       
Pointing device is moved into element A...
2   mouseover   A   
3   mouseenter  A   
4   mousemove   A   Multiple mousemove events

Pointing device is moved into nested element B...
5   mouseout    A   
6   mouseover   B   
7   mouseenter  B   
8   mousemove   B   Multiple mousemove events

Pointing device is moved from element B into A...
9   mouseout    B   
10  mouseleave  B   
11  mouseover   A   
12  mousemove   A   Multiple mousemove events

Pointing device is moved out of element A...
13  mouseout    A   
14  mouseleave  A

さらに、要素が DOM でネストされているが、同じスペースを占有している場合、最も内側の DOM 要素に対して mouseover および mouseout イベントが発生することを示します。仕様が先祖 DOM ノードの mouseover および mouseout イベントの可能性を除外することを意味するかどうかは明確ではありませんが、それらのイベント シーケンスの例には示されていません。

于 2018-11-20T17:16:14.707 に答える