Zwei Möglichkeiten, um das Sprudeln von Ereignissen in JavaScript zu verhindern-js-Tutorial-php.cn

Zwei Möglichkeiten, um das Sprudeln von Ereignissen in JavaScript zu verhindern

yulia

Freigeben： 2018-09-13 16:47:35

Original

1736 Leute haben es durchsucht

1. Was ist ein JS-Ereignis-Bubbling? , dann ruft dieses Ereignis diesen Handler auf. Wenn dieser Ereignishandler nicht definiert ist oder das Ereignis „true“ zurückgibt, wird dieses Ereignis von innen nach außen an das übergeordnete Objekt dieses Objekts weitergegeben, bis es verarbeitet wird (übergeordnetes Alle ähnlichen Ereignisse von Das Objekt wird aktiviert) oder es erreicht die oberste Ebene der Objekthierarchie, das Dokumentobjekt (Fenster in einigen Browsern).

2. Blockierungsmethode

Methode eins: event.stopPropagation( )

<div>
    <p>段落文本内容
        <input type="button" value="点击" />
    </p>
</div>

Nach dem Login kopieren

rrreeMethode zwei: event .target

Jetzt enthält die Variable event im Event-Handler das Event-Objekt. Das Attribut event.target speichert das Zielelement, in dem das Ereignis aufgetreten ist. Dieses Attribut ist in der DOM-API angegeben, wird jedoch nicht von allen Browsern implementiert. jQuery nimmt die notwendigen Erweiterungen an diesem Ereignisobjekt vor, damit diese Eigenschaft in jedem Browser verwendet werden kann. Mit .target können Sie das Element im DOM ermitteln, das das Ereignis zuerst empfangen hat (d. h. das Element, auf das tatsächlich geklickt wurde). Darüber hinaus wissen wir, dass sich dies auf das DOM-Element bezieht, das das Ereignis verarbeitet, sodass wir den folgenden Code schreiben können:

// 为所有div元素绑定click事件
$("div").click( function(event){
    alert("div-click");
} );
//为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-click");
} );
//为所有button元素绑定click事件
$(":button").click( function(event){
    alert("button-click");
    // 阻止事件冒泡到DOM树上
    event.stopPropagation(); // 只执行button的click，如果注释掉该行，将执行button、p和div的click （同类型的事件）  
} );

Nach dem Login kopieren

Der Code stellt zu diesem Zeitpunkt sicher, dass das angeklickte Element

anstelle anderer untergeordneter Elemente. Durch Klicken auf die Schaltfläche wird der Stilkonverter jetzt nicht mehr ausgeblendet, während durch Klicken auf den Rahmen die Ausblendaktion ausgelöst wird. Allerdings führt auch ein Klick auf die Beschriftung zu nichts, da es sich ebenfalls um ein untergeordnetes Element handelt. Tatsächlich können wir das Ziel erreichen, indem wir den Prüfcode nicht hier einfügen, sondern indem wir das Verhalten der Schaltfläche ändern.

Das obige ist der detaillierte Inhalt vonZwei Möglichkeiten, um das Sprudeln von Ereignissen in JavaScript zu verhindern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!