Hot For Coding
JavaScript中stopPropagation函数停止事件传播

JavaScript中的事件默认是冒泡方式,逐层往上传播,可以通过stopPropagation()函数停止事件在DOM层次中的传播

HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>stopPropagation()使用 - Nicholas Lee</title>
  </head>
  <body>
    <button>button</button>
  </body>
</html>

没有加stopPropagation()

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  console.log('button clicked');
};
 
document.body.onclick=function(event){
  console.log('body clicked');
}

// Output:
//  button clicked
//  body clicked

DOM逐层往上传播,所以单击button按钮也传播到了body层,于是body层的click也响应了。结果弹出两个警告框,分别是button与body。

加了stopPropagation()

var button = document.getElementsByTagName('button')[0];
button.onclick=function(event){
  console.log('button clicked');
  // 停止DOM事件层次传播
  event.stopPropagation();
};
 
document.body.onclick=function(event){
  console.log('body clicked');
}

// Output:
//  button clicked

在button的单击事件处理函数中使用了stopPropagation()停止事件传播函数,所以在弹出来自button单击事件的警告框以后就传播不到body,也就不会再次弹出body的警告框,结果只谈一次警告框。

好多童鞋在写JavaScript的时候,往往忽视了DOM事件逐层往上传播的特性,导致程序出现异常。如果需要了解更深入的知识可以找找有关JS事件冒泡的资料看看。

TITLE: JavaScript中stopPropagation函数停止事件传播

LINK: https://www.qttc.net/180_javascript_stoppropagation.html

NOTE: 转载内容请注明出处