js阻止冒泡及jquery阻止事件冒泡示例介绍

js阻止冒泡

  在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容。

  

复制代码 代码如下:

  function stopPro(evt){

  var e = evt || window.event;

  //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高。把这个属性设置为 fasle,

  //可以取消发生事件的源元素的默认动作。

  //window.event?e.returnValue = false:e.preventDefault();

  window.event?e.cancelBubble=true:e.stopPropagation();

  }

  或者:

  

复制代码 代码如下:

  function cancelBubble(e) {

  var evt = e ? e : window.event;

  if (evt.stopPropagation) {

  //W3C

  evt.stopPropagation();

  }

  else {

  //IE

  evt.cancelBubble = true;

  }

  JQuery 提供了两种方式来阻止事件冒泡。

  方式一:event.stopPropagation();

  

复制代码 代码如下:

  $("#div1").mousedown(function(event){

  event.stopPropagation();

  });

  方式二:return false;

  

复制代码 代码如下:

  $("#div1").mousedown(function(event){

  return false;

  });

  Jquery阻止默认动作即通知浏览器不要执行与事件关联的默认动作。

  例如:

  

复制代码 代码如下:

  $("a").click(function(event){

  event.preventDefault(); //阻止默认动作即该链接不会跳转。

  alert(4);//但是这个还会弹出

  event.stopPropagation();//阻止冒泡事件,上级的单击事件不会被调用

  return false;//不仅阻止了事件往上冒泡,而且阻止了事件本身

  });

  但是这两种方式是有区别的。return false 不仅阻止了事件往上冒泡,而且阻止了事件本身。event.stopPropagation() 则只阻止事件往上冒泡,不阻止事件本身。

  场景应用:Google 和 百度的联想框,当弹出下拉列表,用户在下拉列表区域按下鼠标时需要让光标仍然保持在文本输入框。

  Jquery案例:

  

复制代码 代码如下:

  <script src="js/jquery-1.4.3.js"></script>

  <script type="text/javascript">

  $(function(){

  $("#aa").click(function(event){

  alert("aa");

  event.preventDefault();

  event.stopPropagation();

  alert(3);

  });

  $("#ee").click(function(){

  alert("ee");

  });

  $("a").click(function(event){

  event.preventDefault();

  alert(4);

  event.stopPropagation();

  return false;

  });

  });

  </script>

  </head>

  <body>

  <div id="ee">

  aaaaaaa

  <input id="aa" type="button" value="test" />

  <a href="http://baidu.com">baidu.com</a>

  </div>

  </body>

  js案例:

  

复制代码 代码如下:

  function tt(){

  alert("div");

  }

  function ttt(){

  var e = arguments.callee.caller.arguments[0] || window.event;

  window.event?e.returnValue = false:e.preventDefault();

  alert(3);

  window.event?e.cancelBubble:e.stopPropagation();

  alert(4);

  }

  </script>

  </head>

  <body>

  <div onclick = "tt();">

  ccccc

  <a href="http://baidu.com" onclick="ttt();">baidu.com</a>

  </div>