web-dev-qa-db-ja.com

mouseoverイベントとmouseenterイベントの違いは何ですか？

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

2つの間に違いはありますか？もしそうなら、いつそれらを使うべきですか？
（mouseout vs mouseleaveにも適用されます）。

javascriptjqueryeventsjavascript-events
146
Tom

jQuery doc ページから次の例を試すことができます。これは非常にわかりやすく、実際に自分自身で見ることができる、素敵で小さなインタラクティブなデモです。

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>

要するに、要素の上にいるときにマウスオーバーイベントが発生することに気づくでしょう-その子OR親要素から来ますが、マウスエンターイベントはマウスが外側から移動したときにのみ発生しますこの要素からこの要素。

または mouseover() docsとして それを置く：

[.mouseover()]は、イベントのバブルのために多くの頭痛の種を引き起こす可能性があります。たとえば、この例では、マウスポインターがInner要素の上に移動すると、mouseoverイベントがその要素に送信され、その後、Outerにトリクルします。これは、都合の悪いときにバインドされたmouseoverハンドラーをトリガーできます。便利な代替手段については、.mouseenter()の説明を参照してください。

113
Keith Bentrup

Mouseenterとmouseleavedo notはイベントのバブリングに反応しますが、mouseoverとmouseoutdo。

動作を説明する 記事 を次に示します。

41
Joseph

このような質問でよくあることですが、Quirksmodeには ベストアンサー があります。

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

4
Peter Bailey
$(document).ready(function() {
$("#outer_mouseover").bind
("Mouse Over Mouse Out",function(event){
console.log(event.type," :: ",this.id);})
$("#outer_mouseenter").bind
("Mouse enter Mouse leave",function(event){
console.log(event.type," :: ",this.id);})
 });
0
naveed