1. ホーム
  2. jquery

[解決済み] Jqueryのmouseenter()とmouseover()の比較

2022-04-20 21:32:29

質問

ということで、最近回答された 質問 の違いを本当に理解しているのか不明です。 mouseenter()mouseover() . ポストには次のように書かれています。

MouseOver()です。

要素に入るときと、マウスを動かすたびに発生します。 が発生します。

MouseEnter()です。

要素への入力時に発火します。

を思いつきました。 フィドル を使用しており、両者は非常によく似ているようです。どなたか、この2つの違いを説明していただけませんか?

JQueryの定義も読んでみましたが、どちらも同じことが書かれています。

マウスオーバーのイベントは、マウスポインタが要素に入ったときに送られます

mouseenter イベントは、マウスポインタが要素に入ったときに送られます。

どなたか、例を挙げて説明していただけませんか?

どのように解決するのですか?

対象要素に子要素が含まれている場合の挙動を確認します。

http://jsfiddle.net/ZCWvJ/7/

マウスが子要素に入る、または子要素から離れるたびに mouseover はトリガーされますが mouseenter .

$('#my_div').bind("mouseover mouseenter", function(e) {
  var el = $("#" + e.type);
  var n = +el.text();
  el.text(++n);
});
#my_div {
  padding: 0 20px 20px 0;
  background-color: #eee;
  margin-bottom: 10px;
  width: 90px;
  overflow: hidden;
}

#my_div>div {
  float: left;
  margin: 20px 0 0 20px;
  height: 25px;
  width: 25px;
  background-color: #aaa;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<div>MouseEnter: <span id="mouseenter">0</span></div>
<div>MouseOver: <span id="mouseover">0</span></div>

<div id="my_div">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>