Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > Jquery阻止事件冒泡 event.stopPropagation_jquery

Jquery阻止事件冒泡 event.stopPropagation_jquery

WBOY
Freigeben： 2016-05-16 17:58:32
Original
1067 Leute haben es durchsucht

描述： 防止事件冒泡到DOM树上，也就是不触发的任何前辈元素上的事件处理函数。

version added: 1.0
event.stopPropagation()
我们可以用 event.isPropagationStopped() 来确定这个方法是否(在那个事件对象上)调用过了。

这个方法对 trigger() 来自定义的事件同样有效。

注意，这不会阻止同一个元素上的其它事件处理函数的运行。

Additional Notes:
自从.live()方法处理事件一旦传播到文档的顶部，live事件是不可能停止传播的。同样地，.delegate() 事件将始终传播给其中包含的被委托元素；元素上的事件将在被委托事件被调用的时候执行。
Example:
灭掉click事件的冒泡。

复制代码 代码如下:

$("p").click(function(event){
event.stopPropagation();
// do something
});


东西并不难，主要是记录下其中的阻止事件冒泡。

　　因为div添加了单击事件，div内部的img也添加了单击事件，所以当单击img时会先触发img上的单击事件，再触发div上的单击事件，这就是事件冒泡。

　　在Jquery中我们可以很方便的阻止他。

　　如下

复制代码 代码如下:
event.stopPropagation();

　　这样一来单击img就不再触发div的单击事件啦

复制代码 代码如下:

$('div').click(function(){
var $div = $(this);
if($div.find('img').size() > 0){
return;
}else{
$div.css('backgroundColor','#e1f0f3');
$('Jquery阻止事件冒泡 event.stopPropagation_jquery').
appendTo($(this)).click(function(event){
$div.css('backgroundColor','#ffffff');
$(this).remove();
event.stopPropagation();
}).css('margin-left','10px');
}
});
Verwandte Etiketten：
event 事件冒泡
Quelle：php.cn
Vorheriger Artikel：用nodejs访问ActiveX对象，以操作Access数据库为例。_javascript技巧 Nächster Artikel：扩展Jquery插件处理mouseover时内部有子元素时发生样式闪烁_jquery
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Formulardaten können nicht auf Safari/Firefox iOS gesendet werden Dies funktioniert auf allen Plattformen außer Safari/Firefox unter iOS: jQuery("#gfor...
Aus 2024-04-04 12:53:48
0
1
303
POST von „react.js' erreicht den Node/JS-Server als GET Es scheint, dass meine POST-Anfrage irgendwo in meinem REACT-Client-Code in GET konvertier...
Aus 2024-04-03 17:22:04
0
1
331
JQuery – Direkte Berechnungen/Konvertierungen in dynamischen Tabellen Ich habe eine dynamische HTML-Tabelle (Zeilen können hinzugefügt werden) und ich möchte „n...
Aus 2024-04-03 12:38:26
0
1
393
Senden Sie Daten von React mit onSubmit an Node js Ich habe dieses onSubmit in meinem React-Skript, das aufgerufen wird, wenn ich auf die Sch...
Aus 2024-04-02 16:36:07
0
1
268
Angular: Der Eigenschaftsbindung zum Verstehen der Farbe von Textelementen mangelt es an Reaktivität Das Folgende ist meine .ts-Datei, import{Component}from'@angular/core';@Component({selecto...
Aus 2024-04-01 17:28:52
0
1
358
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage