Detailed explanation of js preventing bubbling and default events (default behavior)-JS Tutorial-php.cn

Detailed explanation of js preventing bubbling and default events (default behavior)

高洛峰

Release： 2016-12-09 15:23:50

Original

1300 people have browsed it

The example in this article shares with you how to prevent bubbling and default event methods in js for your reference. The specific content is as follows

Prevent bubbling. A simple example of bubbling is that the son knows a secret message and tells his father. The father knows and tells his grandfather again. The level-by-level transmission causes confusion in the event. To prevent bubbling, the son is not allowed to tell his father. Of course I won't tell grandpa. The domo below is a good example.

<!DOCTYPE html> 
<html> 
  
  <head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <style type="text/css"> 
      #box { 
        width: 300px; 
        height: 300px; 
        background: red; 
        display: none; 
      } 
    </style> 
    <script type="text/javascript"> 
      window.onload = function() { 
          var btn = document.getElementById(&#39;btn&#39;); 
          var box = document.getElementById(&#39;box&#39;); 
          btn.onclick = function(ev) { 
            var oEvent = ev || event; 
            box.style.display = &#39;block&#39;; 
            //oEvent.cancelBubble = true;//高版本浏览器 
            stopBubble(oEvent); 
            //在低版本的chrome和firefox浏览器中需要兼容性处理 
            //高版本chrome和firefox浏览器直接使用上面这行代码即可 
          } 
          document.onclick = function() { 
            box.style.display = &#39;none&#39;; 
          } 
  
        } 
        //阻止冒泡事件的兼容性处理 
      function stopBubble(e) { 
        if(e && e.stopPropagation) { //非IE 
          e.stopPropagation(); 
        } else { //IE 
          window.event.cancelBubble = true; 
        } 
      } 
    </script> 
  </head> 
  
  <body> 
    <input type="button" id="btn" value="语言" /> 
    <div id="box"></div> 
  </body> 
  
</html>

Copy after login

The effect I achieved is: click the button btn to make the box appear, and click elsewhere to make the box disappear.
If I don’t prevent bubbling, then first btn will trigger the click time to display the box, but since the box is included in the document, it will bubble up and trigger the click event of the document, and the box will disappear. The execution sequence of this event can be verified using alert in different click events. Regarding the compatibility processing of cancelBubble, compatibility processing is no longer required in higher versions of chrome and firefox. You can directly use oEvent.cancelBubble = true. The following compatibility processing to prevent browser events is also not required in higher versions of browsers.

Default event. That is, the functionality of the browser itself.

function preventDefa(e){
  if(window.event){
    //IE中阻止函数器默认动作的方式 
    window.event.returnValue = false; 
  }
  else{
    //阻止默认浏览器动作(W3C) 
    e.preventDefault();
  } 
}

Copy after login

This is a compatibility way of writing, but if you only need to support higher version browsers, then just one sentence is enough as above.

btn.onclick = function (){
  return false;
}

Copy after login

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

Detailed explanation of js preventing bubbling and default events (default behavior)