事件执行---阻止蔓延

Posted 2021-01-12 pangmin

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件执行---阻止蔓延相关的知识，希望对你有一定的参考价值。

事件执行分捕获阶段和冒泡阶段，都可以使用

e.stopPropagation()函数去阻止事件的蔓延，

在捕获阶段阻止，后续捕获就不会被执行了，同样在冒泡阶段执行的时候，就会阻止事件的蔓延。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>event</title>
    <style>
    #outer{
    text-align: center;
    width: 400px;
    height: 400px;
    background-color: #ccc;
    margin: 0 auto;
    }
    #middle{
    width: 250px;
    height: 250px;
    background-color: #f00;
    margin: 0 auto;
    }
    #inner{
    width: 100px;
    height: 100px;
    background-color: #0f0;
    margin: 0 auto;
    }
    </style>
</head>
<body>
    <div id=‘outer‘>
        <span>outer</span>
        <div id=‘middle‘>
            <span>middle</span>
            <div id=‘inner‘>
                <span>inner</span>
            </div>
        </div>
    </div>
    <script>
        function $(element){
  return document.getElementById(element);
}
function on(element,event_name,handler,use_capture){
  if(addEventListener){
      $(element).addEventListener(event_name,handler,use_capture);
    }
  else{
    $(element).attachEvent(‘on‘+event_name,handler);
  }
}
 
on("outer","click",o_click_c,true);
on("middle","click",m_click_c,true);
on("inner","click",i_click_c,true);
 
on("outer","click",o_click_b,false);
on("middle","click",m_click_b,false);
on("inner","click",i_click_b,false);
 
 
 
function o_click_c(e){
    e.stopPropagation()
    console.log("outer_捕获");
    alert("outer_捕获");
}
function m_click_c(){
    console.log("middle_捕获");
    alert("middle_捕获");
}
function i_click_c(){
    console.log("inner_捕获");
    alert("inner_捕获");
}
function o_click_b(){
    console.log("outer_冒泡");
    alert("outer_冒泡");
}
function m_click_b(){
    console.log("middle_冒泡");
    alert("middle_冒泡");
}
function i_click_b(){
    console.log("inner_冒泡");
    alert("inner_冒泡");
}
    </script>
</body>
</html>

　　这个例子说明，事件在捕获阶段被阻止了，后续的捕获和冒泡都不会被执行

以上是关于事件执行---阻止蔓延的主要内容，如果未能解决你的问题，请参考以下文章

Developer Test-Jquery-阻止冒泡

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

JS 之阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return false的区别

事件事件流

阻止事件冒泡和阻止后续代码执行

c# 怎么阻止事件执行