ホバーイベントはバブルですか？

私の親DIVは多くのクリック可能な子を持つので、イベントの委任を使用して、親DIV上の子供のクリックとホバーイベントの両方をキャプチャしようとしています。ホバーイベントはバブルですか？

クリックイベントがうまくいきますが、ホバーイベントをキャプチャできないようです。誰でも知っている理由は？

<div id="theParent"> 

    <a href="#">Clicked 1</a> 
    <a href="#">Clicked 2</a> 
    <a href="#">Clicked 3</a> 
    <a href="#">Clicked 4</a> 
    <a href="#">Clicked 5</a> 

</div>

のjQuery： - に思わ

$('#theParent').click(captureEvent).hover(captureEvent,captureEvent); 

var captureEvent = function(e){ 

    console.log(e.target); 

};

出典

2011-07-12 Steve

'a'タグ上でホバリングしないと、あなたは' div'の上に浮かんでいませんか？それはバブルではないので、divやその子のどれかが動かされているかどうかを確認する必要があります。簡単な再帰関数がうまくやってくれます。私はこれがあなたの質問に対する答えであるかどうか分からないので、コメントとして投稿します。（私は静かに質問を理解していません） – Ben

あなたがAタグの上にマウスを置くと、あなたもホバリングしていると思いました親DIV上に – Steve

@mazzzzz [this]（http://stackoverflow.com/questions/5574207/javascript-which-events-do-not-bubble）mouseenterとmouseleaveイベントはバブルしないので、jQueryのホバーはマウスセンターのショートカットですマウスが離れると、ホバーが親にバブリング/発砲していない理由がわかります。 – Steve

がそれを使用する前にcaptureEventを定義してみ

ホバーイベントがバブル:)

HTMLいない私に教えないでください仕事：http://jsfiddle.net/rEzSd/1/。しかし、ホバリングのターゲットは、#theParentのすべてのスペースがリンクによって占有されている場合、リンクになります。私はそれを明確にするためにいくつかのパディングを追加しました。

出典

2011-07-12 09:06:00 polarblau

申し訳ありませんが、各リンクでキャプチャされているホバーイベントは表示されません。あなたがDIVをマウスオーバーするときにホバーは発砲しているがリンクは動かされていない。 – Steve

パディングを削除すると、リンク上に再びホバーが表示されます。 – polarblau

これは本当ですが、設計上の理由からリンクの周りにパディングが必要です。ユーザーがdiv上にマウスを移動し、divとA hoverの両方が起動するリンクを移動すると、私は望んでいました。残念ながら、私はそれ以来、マウスセンターイベントとマウスリーブイベントは実際には泡立ちません。 – Steve

ホバーイベントはバブルですか？

答えて

関連する問題