jQueryでevent.targetとthisの違い--泡が立つ
1100 ワード
なぜ?targetとthis、
根本的な原因は
jsイベントは泡が立ちます.これは変わります.event.ターゲットは変更されず、誰が呼び出したのか、イベントをトリガーするDOM要素自体を指します.
栗を挙げて、例えばdiv要素の中にspan要素があって、誰をクリックしたいのか、背景の色がオレンジ色になると、私たちは普通簡単に書くことができます.
実はjsバブルメカニズムのため、最終的に実現した効果は内部span要素をクリックすると、外のdiv要素もオレンジ色になります
泡が出るのを止める必要があります
方法1:eventを使用する.target
延長:
方法2:直接戻して捨てる
方法3:eventを使用する.stopPropagation();
根本的な原因は
jsイベントは泡が立ちます.これは変わります.event.ターゲットは変更されず、誰が呼び出したのか、イベントをトリガーするDOM要素自体を指します.
栗を挙げて、例えばdiv要素の中にspan要素があって、誰をクリックしたいのか、背景の色がオレンジ色になると、私たちは普通簡単に書くことができます.
$("div, input").click(function () {
$(this).css("background-color", "orange");
});
実はjsバブルメカニズムのため、最終的に実現した効果は内部span要素をクリックすると、外のdiv要素もオレンジ色になります
泡が出るのを止める必要があります
方法1:eventを使用する.target
$("div, input").click(function (event) {
$(event.target).css("background-color", "orange");
});
延長:
if (event.target == this){
doSometing();
}
方法2:直接戻して捨てる
$("div, input").click(function (event) {
$(this).css("background-color", "orange");
return false;
});
方法3:eventを使用する.stopPropagation();
$("div, input").click(function (event) {
$(this).css("background-color", "orange");
event.stopPropagation();
});