js中简单阻止事件冒泡的方法

JavaScript 阻止事件冒泡，无使用其它插件来辅助，原生JS代码，考虑到浏览器的兼容性问题，这里对IE/火狐、Operating以及Chrome都有针对性的判断，代码如下：

代码如下	复制代码
function cancelBubble(evt) { // 阻止事件冒泡 if (window.event) { // Chrome,IE6,Opera window.event.cancelBubble = true; } else { // FireFox 3 evt.stopPropagation(); } }

停止事件传播

事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用。不过，只要我们通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。
下面，我们会删除刚才添加的检查语句event.target == this，并在按钮的单击处理程序中添加一些代码：
复制代码代码如下:

代码如下	复制代码
$(document).ready(function(){ $('#switcher .button').click(funtion(event){ //…… event.stopPropagation(); }) })

同以前一样，需要为用作单击处理程序的函数添加一个参数，以便访问事件对象。然后，通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来，单击按钮的事件会被按钮处理，而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。

简单的实现了一下，整了半天，代码如下：

代码如下

复制代码

<html>
<head>
    <style type="text/css">
         #hide{
         width:75%;height:80px;background:skyblue;display:block;
         }
         .hander{cursor:pointer;}
         input{
         margin:5 0 0 900;
         }
    </style>

     //阻止冒泡事件方法
     function stopPropagation(e) {
      e = e || window.event;
      if(e.stopPropagation) { //W3C阻止冒泡方法
          e.stopPropagation();
      } else {
          e.cancelBubble = true; //IE阻止冒泡方法
      }
  }
  //方法必须要放在window.onload下
  window.onload = function(){
   document.getElementById("hide").onclick = function(e) {
       stopPropagation(e);
      }

      document.getElementById('btn_show').onclick = function(e) {
         document.getElementById('hide').style.display = 'block';
         stopPropagation(e);
   }
  }

      </script>
</head>
<body>
  <div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
  <input type="button" id="btn_show" value="show" class="hander"/>
</body>
</html>

时间： 2024-09-25 08:53:31

js中简单阻止事件冒泡的方法

js中简单阻止事件冒泡的方法的相关文章

as3.0中如何阻止事件冒泡?

js中获取键盘事件的简单实现方法_javascript技巧

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

JQuery中阻止事件冒泡几种方式及其区别介绍

JQuery中阻止事件冒泡几种方式及其区别介绍_jquery

利用JQuery阻止事件冒泡_jquery

阻止事件冒泡，阻止默认事件，event.stopPropagation()和event.preventDefault()，return fal的区别

Jquery阻止事件冒泡 event.stopPropagation_jquery

JS中捕获console.log()输出的方法_javascript技巧