[解決済み] mouseoverイベントとmouseenterイベントの違いは何ですか?
2022-04-25 08:36:59
質問
私はいつも
mouseover
イベントですが、jQuery のドキュメントを読んでいたら
mouseenter
. これらは、全く同じように機能するようです。
両者に違いはあるのか、あるとすればどのような場合に使うのか。
(にも適用されます。
mouseout
対
mouseleave
).
解決方法は?
から、次の例を試してみてください。 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()
を使用すると便利です。
関連
-
[解決済み】Uncaught SyntaxError: JSONの位置0に予期しないトークンuがあります。
-
[解決済み】event.stopPropagationとevent.preventDefaultの違いは何ですか?
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptでオブジェクトをディープクローンする最も効率的な方法は何ですか?
-
[解決済み] とは何ですか! (not not)演算子とは何ですか?
-
[解決済み] callとapplyの違いは何ですか?
-
[解決済み] event.preventDefault() vs. return false
-
[解決済み] Bowerとnpmの違いは何ですか?
-
[解決済み] jQuery 複数のイベントで同じ関数を起動する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
Vueのイベント処理とイベントモディファイアの解説
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み】Node.jsで "Cannot find module "エラーを解決するには?
-
[解決済み】React Nativeアプリをターミナルから実行するとエラーが発生する(iOS)
-
[解決済み】JavaScript TypeError: null のプロパティ 'style' を読み取ることができない
-
[解決済み】 env: node: macにそのようなファイルやディレクトリはありません
-
[解決済み】 Uncaught TypeError : undefined のプロパティ 'replace' を読み取れない In Grid
-
フロントエンド null のプロパティ 'disabled' を読み取れない 問題が解決された
-
[解決済み] Jqueryのmouseenter()とmouseover()の比較