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

Der Inhalt dieses Artikels befasst sich mit zwei Methoden zur Verhinderung von Event-Sprudeln in js. Freunde in Not können sich darauf beziehen

Einführung in Sprudelnde Events

Wenn wir auf ein Steuerelement klicken und das übergeordnete Steuerelement, einschließlich dieses Steuerelements, ebenfalls über ein Klickereignis verfügt, wird die Ausführung fortgesetzt.

Methode 1: event.stopPropagation( );

Zum Beispiel:

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

HTML-Code:

// 为所有p元素绑定click事件
$("p").click( function(event){
    alert("p-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和p的clic；
                 } );

Methode 2: event.target

现在，事件处理程序中的变量event保存着事件对象。而event.target属性保存着发生事件的目标元素。这个属性是DOM API中规定的，但是没有被所有浏览器实现 。jQuery对这个事件对象进行了必要的扩展，从而在任何浏览器中都能够使用这个属性。通过.target，可以确定DOM中首先接收到事件的元素（即实际被单击的元素）。而且，我们知道this引用的是处理事件的DOM元素，所以可以编写下列代码：

$(document).ready(function(){
 $('#switcher').click(function(event){
  $('#switcher .button').toggleClass('hidden');
  })
 })
  
$(document).ready(function(){
 $('#switcher').click(function(event){
  if(event.target==this){
  $('#switcher .button').toggleClass('hidden');
  }
  })
 })

此时的代码确保了被单击的元素是

 ，而不是其他后代元素。现在，单击按钮不会再折叠样式转换器，而单击边框则会触发折叠操作。但是，单击标签同样什么也不会发生，因为它也是一个后代元素。实际上，我们可以不把检查代码放在这里，而是通过修改按钮的行为来达到目标 。

Verwandte Empfehlungen:

Die spezifische Implementierungsmethode von js, die das Anhängen von Ereignissen verhindert

JS verhindert Sprudeln und Standardereignisse (Standardverhalten), ausführliche Erklärung

JS verhindert, dass Benutzer Beispielcode mehrmals einreichen_Javascript-Kenntnisse

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