162

私は常にmouseoverイベントを使用してきましたが、jQuery のドキュメントを読んでいるときにmouseenter. それらはまったく同じように機能するようです。

2つに違いはありますか?もしそうなら、いつそれらを使用する必要がありますか? ( vs
にも適用されます)。mouseoutmouseleave

4

4 に答える 4

129

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要素上を移動すると、mouseoverイベントがその要素に送信され、Outerまで細流化されます。これにより、バインドされたマウスオーバーハンドラーが不適切なタイミングでトリガーされる可能性があります。.mouseenter()有用な代替案については、ディスカッションを参照してください。

于 2009-07-09T14:53:25.163 に答える
4

このような質問によくあることですが、Quirksmode には最良の答えがあります。

jQuery の目標の 1 つはブラウザーに依存しないようにすることであるため、どちらのイベント名を使用しても同じ動作がトリガーされると思います。編集：他の投稿のおかげで、そうではないことがわかりました

于 2009-07-09T14:47:27.030 に答える