Blocks default and bubbling events, recognizing the difference between Event.preventdefault (), Event.stoppropagation (), and return False

Resources:
1, JS in the Preventdefault and stoppropagation detailed
3, about JS return false, Event.preventdefault () and Event.stoppropagation ()

one, preventdefault () to prevent default event execution

<script type= "Text/javascript" >
  //block default event execution
  function Stopdefault (e) {
    if (e && E.preventdefault) {
      e.preventdefault ();
    } else {
      window.event.returnValue = false;
    }
   
   return false;   This also prevents default events and event Bubbles (limited to jquery bindings)
  }
</script>

<a href= "http://www.baidu.com" id= "Testlink" > Baidu </a>
<script type= "Text/javascript" >
  var test = document.getElementById ("Testlink");
  Test.onclick = function (e) {
    alert ("My link address is: + This.href +", but I will not jump.) ");
  
    Stopdefault (e); Block default event execution
  };
</script>

Second, stoppropagation () block event bubbling

<script>//block event bubbling function dosomething (obj, evt) {alert (obj.id); var e = evt?
    Evt:window.event;  if (window.event) {e.cancelbubble = true;//IE block bubbling} else {e.stoppropagation (); Other browsers block Bubbling}} </script> <div id= "parent1" onclick= alert (this.id) "style=" Width:250px;background-color : Yellow "> <p>this is parent1 div.</p> <div id=" child1 "onclick=" alert (this.id) "style=" width:200px;b Ackground-color:orange "> <p>this is Child1 (event bubbling) .</p> </div> <p>this is parent1 div.&lt ;/p> </div> <br/> <div id= "Parent2" onclick= "alert (this.id)" style= "Width:250px;background-color: Cyan; " > <p>this is parent2 div.</p> <div id= "child2" onclick= "dosomething (this,event);" Style= "width:200px ; background-color:lightblue; "
 > <p>this is child2 (event not bubbling) .</p> </div> <p>this is Parent2 div.</p> </div>

third, return false block defaults and bubbling eventsHtml

<script src= "Https://code.jquery.com/jquery-3.1.0.js" ></script>

<div id= "Parent3" Alert (this.id) "style=" Width:250px;background-color:cyan; width:400px; " >
  <a href= "http://www.baidu.com" id= "TestLink1" >1. Baidu (Default event, bubbling) </a>
  <br/>
  <br/ >
  <a href= "http://www.baidu.com" id= "TestLink2" >2. Baidu (Block event, bubbling) </a>
  <br/>
  <br/ >
  <a href= "http://www.baidu.com" id= "TestLink3" >3. Baidu (Block event, block bubbling) (return false) </a>
  <br/ >
  <br/>
  <a href= "http://www.baidu.com" id= "TestLink4" >4. Baidu (Block event, prevent bubbling) (normal method) </a>  
</div>

Js

JS binding: Blocks events, but bubbles.
var test = document.getElementById ("TestLink2");
Test.onclick = function (e) {
  alert ("My link address is: + This.href +", but I will not jump, will bubble.) ");
  return false;

jquery bindings: Block events, block bubbles. (Note: "Limited jquery binding Events")
$ ("#testLink3"). Click (function () {
  alert ("My link address is: + This.href +", but I will not jump, nor bubble.) ");
  return false;
});

Block events to prevent bubbling. (General method)
var test4 = document.getElementById ("TestLink4");
Test4.onclick = function (e) {
//or with jquery binding
//$ ("#testLink4"). Click (function (e) {
  alert ("My link address is:" + This.href + ", but I will not jump, nor bubble. ");

  Block Event
  if (e && e.preventdefault) {
    e.preventdefault ();
  } else {
    Window.event.returnValue = false;
  }

  Block Bubble
  if (e && e.stoppropagation) {
    e.stoppropagation ()//other browsers block bubbling
  } else {
    Window.event.cancelBubble = true; IE block bubbling
  }
});

Note:

     use return false to compare violence, which blocks event bubbling and also blocks default events. return false equals the simultaneous invocation of Event.stoppropagation () and Event.preventdefault (), which seems to be convenient and concise, but return false is also conditionally limited:
  1, you must bind with jquery;
  2, it is said that if you bind an event with AddEventListener () or attachevent (), return false prevents the event from taking effect. It is necessary to block the general Preventdefault () method or set the ReturnValue property of the event object to prevent it; the
  3, H5 specification indicates that in the case of several special events, such as MouseOver, the return false does not necessarily terminate the event.
So, in practical use, we need to avoid canceling the default behavior of the event by return false.