実現したい事
親要素div#outerにマウスポインター乗った時、イベントが発生した事を出力したい。また、ポインターが要素から外れた時、同様にイベント発生を出力する。
この時、子要素はイベントに影響しない事とする。
状況
mouseover、mouseoutは子要素もイベント監視対象とするとの事なので、mouseenter、mouseleaveを使用しましたが、子要素にもイベントが適用されてしまいます。
試した事(いずれも効果なし)
・アロー関数を匿名関数に修正
・mouseover、mouseoutを使用
html
1<div id="outer"> 2外側(outer) 3<p id="inner"> 4内側(inner) 5</p> 6</div> 7 8<div id="result"></div>
javascript
1$('#outer').mouseenter(e=>{ 2$('#result').html( 3$('#result').html()+'mouseenter:'+e.target.id+'<br>') 4}).mouseleave(e=>{ 5$('#result').html( 6$('#result').html()+'mouseleave:'+e.target.id+'<br>'); 7});
実行結果
外側(outer)
内側(inner)
(↓一例:innerが出力されてしまう)
mouseenter:outer
mouseleave:inner
mouseenter:inner
mouseleave:outer
環境
chrome : ver72.0.3626.96
jQuery : ver3.3.1

回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/13 06:04 編集