javascriptイベント処理(mouseenter/mouseleave)

Question

実現したい事

親要素div#outerにマウスポインター乗った時、イベントが発生した事を出力したい。また、ポインターが要素から外れた時、同様にイベント発生を出力する。
この時、子要素はイベントに影響しない事とする。

状況

mouseover、mouseoutは子要素もイベント監視対象とするとの事なので、mouseenter、mouseleaveを使用しましたが、子要素にもイベントが適用されてしまいます。

試した事(いずれも効果なし)

・アロー関数を匿名関数に修正
・mouseover、mouseoutを使用

<div id="outer">
外側(outer)
<p id="inner">
内側(inner)
</p>
</div>

<div id="result"></div>

$('#outer').mouseenter(e=>{
$('#result').html(
$('#result').html()+'mouseenter:'+e.target.id+'<br>')
}).mouseleave(e=>{
$('#result').html(
$('#result').html()+'mouseleave:'+e.target.id+'<br>');
});

実行結果

外側(outer)
内側(inner)
(↓一例:innerが出力されてしまう)
mouseenter:outer
mouseleave:inner
mouseenter:inner
mouseleave:outer

環境

chrome : ver72.0.3626.96
jQuery : ver3.3.1

Answer 1

e.targetを、自分の要素かどうか判定するのが良いのかなと思います。
あと、HTMLの追加処理はappend()使ったほうが楽かなと。

  $('#outer').mouseenter(e=>{
    if(e.target == e.currentTarget) {
      $('#result').append('mouseenter:'+e.target.id+'<br>')
    }
  }).mouseleave(e=>{
    if(e.target == e.currentTarget) {
      $('#result').append('mouseleave:'+e.target.id+'<br>');
    }
  });

Comments

[kanetugu_70e]

根本的にイベントというものを勘違いしておりました。
(ユーザーコード中でイベントリスナー、ハンドラ記載が無くても、発生条件さえ満たせばイベント自体は発生している。
今回の件だと、outerがイベント処理のトリガーにはなっているが、innerのイベント情報を出力してしまっていた。)
コードをご記載頂いたお陰で、気付く事が出来ました。ご回答ありがとうございました。