阻止时间冒泡 -event.stopPropagation();

Posted jinsuo

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了阻止时间冒泡 -event.stopPropagation();相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 
  $("p").click(function(event){
    alert("The p element was clicked.");
  });
  $("div").click(function(){
    alert("The div element was clicked.");
       $("span").click(function(event){
        event.stopPropagation();  //阻止冒泡
        alert("The span element was clicked.");
      });
  });
});
</script>
</head>
<body>

<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
ccc
<p style="background-color:pink">bbbb <br>
    <span style="background-color:orange">ccccc</span>
    </p>
</div>


</body>
</html>

 

以上是关于阻止时间冒泡 -event.stopPropagation();的主要内容,如果未能解决你的问题,请参考以下文章

在jq中看到”阻止冒泡“,请问阻止冒泡啥意思?

HTML如何阻止事件冒泡?求源码分析

vue阻止事件冒泡,事件穿透

js阻止冒泡和默认事件(默认行为)详解

js阻止默认事件与js阻止事件冒泡示例分享 js阻止冒泡事件

JS-阻止冒泡事件与事件委托