An introduction to how javascript prevents event bubbling and browser default behavior

1. Prevent event bubbling and make it a capture-type event triggering mechanism.

1 function stopBubble(e) { 
2 //如果提供了事件对象，则这是一个非IE浏览器 3 if ( e && e.stopPropagation ) 
4     //因此它支持W3C的stopPropagation()方法 5     e.stopPropagation(); 
6 else7     //否则，我们需要使用IE的方式来取消事件冒泡 8     window.event.cancelBubble = true; 
9 }

2. After pressing a key, you do not want the key to continue to be passed to an object such as an HTML text box. You can cancel the return value. That is, stop the default behavior of the default event.

 1 //阻止浏览器的默认行为  2 function stopDefault( e ) { 
 3     //阻止默认浏览器动作(W3C)  4     if ( e && e.preventDefault ) 
 5         e.preventDefault(); 
 6     //IE中阻止函数器默认动作的方式  7     else 8         window.event.returnValue = false; 
 9     return false; 
10 }

Then let’s look at the effect of function one through the following piece of code:

 1 b585974ae3b7dba3039af53a9593f9c4 2 383eb734b02b508089ba2d78eb4c6f68 3   4 93f0f5c25f18dab9d176bd4f6de5d30e 5 c7ec11a2c3be6bf806d38a7707bdfc04 6 b2386ffb911b14667cb8f0f91ea547a7效果测试6e916e0f7d1e588d4f442bf645aedb2f 7 bee28c12aea4e325dda588fe5fe40d632cacc6d41bbb37262a98f745aa00fbf0 8 57916d668bd9fde2bda8a8d63055ad35 9 $(document).ready(function()10 {11 $('div.c1').click(function(e){alert('单击了div');});12 $('div.c2').click(function(e){alert('单击了div');stopBubble(e);});13 $(document).click(function(e){alert('单击了document');});14 $('#txt1').val('123');15 $('#txt1').click(function(e){stopBubble(e);});16 $('#txt1').keydown(function(e){stopDefault(e);alert('你按下了键值'+e.keyCode); });17 })18  19 function stopBubble(e) { 
20 //如果提供了事件对象，则这是一个非IE浏览器 21     if ( e && e.stopPropagation ) 
22     //因此它支持W3C的stopPropagation()方法 23     e.stopPropagation(); 
24      else 25     //否则，我们需要使用IE的方式来取消事件冒泡 26     window.event.cancelBubble = true; 
27 } 
28 //阻止浏览器的默认行为 29 function stopDefault( e ) { 
30     //阻止默认浏览器动作(W3C) 31     if ( e && e.preventDefault ) 
32         e.preventDefault(); 
33     //IE中阻止函数器默认动作的方式 34     else 35         window.event.returnValue = false; 
36     return false; 
37 }38 2cacc6d41bbb37262a98f745aa00fbf039 46d5fe1c7617e3914f214aaf043f4ccf40 body{41 font-size:14px;42     }43 }44 .c1{45     font-family:"Arial Unicode MS"46     }47 .c2{48     font-family:helvetica,simsun,arial,clean49     }50 531ac245ce3e4fe3d50054a55f26592751 9c3bca370b5104690d9ef395f2c5f8d152  53 6c04bd5ca3fcae76e30b72ad730ca86d54  55 f20e943b74fd5fdb94f5d3439b3a35eb测试的文字,这里是样式C1,单击以冒泡的形式触发事件.16b28748ea4df4d9c2150843fecfba68fa8fd94cc4b4d9671e4ee513ae2a31d156  57 c479928d7ffa75604ab61e9beb988cd4测试的文字,这里是样式C2,单击以捕获的形式触发事件.16b28748ea4df4d9c2150843fecfba68fa8fd94cc4b4d9671e4ee513ae2a31d158  59 dc6dce4a544fdca2df29d5ac0ea9906b163139274945b7b83191425abcca102f16b28748ea4df4d9c2150843fecfba68fa8fd94cc4b4d9671e4ee513ae2a31d160  61 36cc49f0c466276486e50c850b7e495662 73a6ac4ed44ffec12cee46588e518a5e

General method to stop bubbling:

function stopBubble(e) {
//如果提供了事件对象，是非IE浏览器
if ( e && e.stopPropagation )
  //使用W3C的stopPropagation()方法
  e.stopPropagation();
else
  //使用IE的cancelBubble = true来取消事件冒泡
  window.event.cancelBubble = true;
}

Block the browser Default behavior-general method

//Block the browser’s default behavior

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

The above is the detailed content of An introduction to how javascript prevents event bubbling and browser default behavior. For more information, please follow other related articles on the PHP Chinese website!