web-dev-qa-db-ja.com

jquery mouseenter（）vs mouseover（）

したがって、最近回答した question を読んだ後、mouseenter()とmouseover()の違いを本当に理解しているかどうかはわかりません。投稿状態

MouseOver（）：

要素に入ると、要素内でマウスの動きが発生するたびに起動します。

MouseEnter（）：

要素に入ると起動します。

両方を使用する fiddle を思い付きましたが、それらは非常によく似ているようです。誰かが私に2つの違いを説明できますか？

また、私はJQuery定義を読んでみましたが、どちらも同じことを言っています。

マウスポインターが要素に入ると、mouseoverイベントが要素に送信されます

Mouseenterイベントは、マウスポインターが要素に入ると要素に送信されます。

誰かが例を挙げて明確にできますか？

jquerydom-events
162
aziz punjani

ターゲット要素に子要素が含まれる場合の動作を確認します。

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>
259
gilly3

これは私が見つけた最高の例の1つです。

  • mouseenter
  • マウスオーバー
  • マウスアウト
  • ネズミ

http://bl.ocks.org/mbostock/5247027

27
Christopher

ただし、これらは同じように動作しますが、mouseenterイベントのみマウスポインターが選択した要素に入ったときにトリガーされます。 mouseoverイベントがトリガーされますマウスポインターが子要素も入力した場合。

11
ErickBest

Jqueryドキュメントページの下部にあるサンプルコードとデモを参照してください。

http://api.jquery.com/mouseenter/

...マウスオーバーは、ポインターが子要素に移動したときにも発生しますが、mouseenterはポインターがバインドされた要素に移動したときにのみ発生します。

4
Willem

mouseenter event differs from mouseover処理方法event bubbling。 mouseenterイベント、mouseenterの場合、mouseenterがバインドされている場合のハンドラー、-子孫ではない 。参照： https://api.jquery.com/mouseenter/

mouseleave event differs from mouseout処理方法event bubbling。 mouseleaveイベント、マウスが要素を離れるにバインドされている場合のみトリガーハンドラー、子孫ではない 。参照： https://api.jquery.com/mouseleave/

4
user2330678

この例は、mousemove、mouseenterとmouseoverイベント：

https://jsfiddle.net/z8g613yd/

HTML：

<div onmousemove="myMoveFunction()">
    <p>onmousemove: <br> <span id="demo">Mouse over me!</span></p>
</div>

<div onmouseenter="myEnterFunction()">
    <p>onmouseenter: <br> <span id="demo2">Mouse over me!</span></p>
</div>

<div onmouseover="myOverFunction()">
    <p>onmouseover: <br> <span id="demo3">Mouse over me!</span></p>
</div>

CSS：

div {
    width: 200px;
    height: 100px;
    border: 1px solid black;
    margin: 10px;
    float: left;
    padding: 30px;
    text-align: center;
    background-color: lightgray;
}

p {
    background-color: white;
    height: 50px;
}

p span {
    background-color: #86fcd4;
    padding: 0 20px;
}

JS：

var x = 0;
var y = 0;
var z = 0;

function myMoveFunction() {
    document.getElementById("demo").innerHTML = z += 1;
}

function myEnterFunction() {
    document.getElementById("demo2").innerHTML = x += 1;
}

function myOverFunction() {
    document.getElementById("demo3").innerHTML = y += 1;
}
  • onmousemove：マウスポインターがdiv要素上を移動するたびに発生します。
  • onmouseenter：マウスポインターがdiv要素に入ったときにのみ発生します。
  • onmouseover：マウスポインターがdiv要素とその子要素（pおよびspan）に入ると発生します。
1
Mourad El Aomari