How JavaScript blocks event bubbling and default behavior

Block bubbling:Bubble Simple example, the son knew a secret message, it told Dad, Dad knew and told Grandpa, a level of transmission so as to cause the chaos of events, and stop bubbling is not let son tell Dad, Dad naturally won't tell Grandpa. The following demo is a good example.

<! DOCTYPE html> 

<textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" readonly=""></textarea> x48

1

<! DOCTYPE html>

2

< HTML >

3

4

< Head >

5

< Meta CharSet="UTF-8">

6

< title ></ title >

7

< style type="text/css">

8

#box

9

width 300px

10

Height 300px

11

background Red

12

Display None

13

14

</ style >

15

< Script type="Text/javascript">

16

window. onload = function

17

var btn = document. getElementById (' btn '

18

var Box = document. getElementById (' box '

19

btn. onclick = function (EV

20

var oevent = EV || Event

21st

Box. style. Display = ' Block '

22

23

stopbubble (oevent

24

25

26

27

document. onclick = function

28

Box. style. Display = ' None '

29

30

31

32

33

function stopbubble (e

34

if (e&&e. stoppropagation

35

e. stoppropagation

36

  Else

37

window. event. cancelbubble = true

38

39

40

</ Script >

41

</ Head >

42

43

< Body >

44

< input type="button"id="btn"value="language"/>

45

< Div id="box"></div>

46

</ Body >

47

48

</ HTML >

The effect I achieved was: Click the button btn let box show, and click elsewhere to let box disappear.
If I do not stop bubbling, then the first BTN will trigger the click Time, let the box display, but because box is contained in the document, so will bubble up and trigger the document Click event, the box disappears. The order of execution of this event can be verified by using alert in different click events. Compatibility handling for cancelbubble is no longer required for compatibility processing in newer versions of Chrome and Firefox, using oevent.cancelbubble = True directly. The following compatibility handling of blocking browser events is also not required in a high-version browser.

The default event. the functionality that the browser itself has.

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

<textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" readonly=""></textarea>110 1

function Preventdefa (e

2

if (window. Event

3

how to block the default action of a function in//ie

4

window. event. returnvalue = false;

5

6

Else

7

//block default browser action (web)

8

e. Preventdefault

9

  }

10

This is a compatibility notation, but if you only need to support a high-version browser, then as above, a single sentence.

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

<textarea autocorrect="off" autocapitalize="off" spellcheck="false" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;" tabindex="0" readonly=""></textarea>1 1

btn. onclick = function (){

2

return false

3

}

From for notes (Wiz)

How JavaScript blocks event bubbling and default behavior