1. ホーム
  2. javascript

[解決済み] mouseoverイベントとmouseenterイベントの違いは何ですか?

2022-04-25 08:36:59

質問

私はいつも mouseover イベントですが、jQuery のドキュメントを読んでいたら mouseenter . これらは、全く同じように機能するようです。

両者に違いはあるのか、あるとすればどのような場合に使うのか。

(にも適用されます。 mouseoutmouseleave ).

解決方法は?

から、次の例を試してみてください。 jQueryのドキュメント のページをご覧ください。これは、とてもわかりやすく、実際に自分の目で確かめることができる、小さな、インタラクティブなデモです。

var i = 0;
$("div.overout")
  .mouseover(function() {
    i += 1;
    $(this).find("span").text("mouse over x " + i);
  })
  .mouseout(function() {
    $(this).find("span").text("mouse out ");
  });

var n = 0;
$("div.enterleave")
  .mouseenter(function() {
    n += 1;
    $(this).find("span").text("mouse enter x " + n);
  })
  .mouseleave(function() {
    $(this).find("span").text("mouse leave");
  });
div.out {
  width: 40%;
  height: 120px;
  margin: 0 15px;
  background-color: #d6edfc;
  float: left;
}

div.in {
  width: 60%;
  height: 60%;
  background-color: #fc0;
  margin: 10px auto;
}

p {
  line-height: 1em;
  margin: 0;
  padding: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="out overout">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

<div class="out enterleave">
  <span>move your mouse</span>
  <div class="in">
  </div>
</div>

つまり、マウスオーバーはその要素の上に乗ったとき(子または親要素から)発生し、マウスエンターはその要素の外からその要素に移動したときのみ発生することがわかります。

または のように mouseover() ドキュメント を置く。

[ .mouseover() は、イベントバブリングのために多くの頭痛の種を引き起こす可能性があります。例えば、この例でマウスポインタが Inner 要素の上に移動すると、マウスオーバーイベントがその要素に送られ、その後 Outer 要素にトリクルアップします。これは、バインドされたマウスオーバーハンドラを不適切なタイミングでトリガーする可能性があります。の説明を参照してください。 .mouseenter() を使用すると便利です。