阻止冒泡

当父元素有点击事件,子元素也有点击事件时,点击子元素会同时触发 子事件和父事件,解决方法:
<body>
        <div class="a">
            好友<span>+</span>
        </div>
        <script type="text/javascript">
            var a = document.querySelector(".a");
            var span = document.querySelector(‘.a span‘)
            a.onclick = function(){
                alert(1);
            }
            /*
             * 阻止冒泡
             * 当父元素有点击事件,子元素也有点击事件时,点击子元素会同时触发 子事件和父事件,
             * 解决方法:子元素点击事件 加上
             */
            span.onclick = function(e){
                    e = e || window.event;
                    if(e.cancelBubble){
                        e.cancelBubble = true;
                    }else{
                        e.stopPropagation()
                    }
                alert(2);
            }
        </script>
    </body>
时间: 2024-08-06 11:54:03

阻止冒泡的相关文章

阻止默认行为 阻止冒泡

什么是默认行为? var a = document.getElementById('a'); a.addEventListener('click',function(e){ e.preventDefault(); },false); 兼容性问题: function preventDefault(event){ var event = $$.getEvent(event); if(event.preventDefault){ event.preventDefault(); }else{ event

点击tr实现选择checkbox功能,点击checkobx的时候阻止冒泡事件, jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态

给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态,所以我就把jquery对象转换为DOM对象,怎么转呢?jquery对象[0]或者get(0)就转换成DOM对象,然后直接.checked返回true或false就可以判断checkbox是否选中了.然后判断状

弹出菜单 阻止冒泡

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <title>弹出菜单,阻止冒泡</title> <style> </style> <script src="jquery-1.9.1.js"></script> <script> $(fu

jQuery中的冒泡事件和阻止冒泡

jQuery代码 <script type="text/javascript"> $(function () { $("#p1").click(function () { alert("p1被点了"); }); $("#td1").click(function (e) { alert("td1被点了"); e.stopPropagation() }); //阻止冒泡 $("#tr1&q

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

js阻止冒泡 在阻止冒泡的过程中,W3C和IE采用的不同的方法,那么我们必须做以下兼容. 复制代码 代码如下: function stopPro(evt){ var e = evt || window.event; //returnValue如果设置了该属性,它的值比事件句柄的返回值优先级高.把这个属性设置为 fasle, //可以取消发生事件的源元素的默认动作. //window.event?e.returnValue = false:e.preventDefault(); window.ev

事件委托与阻止冒泡

简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="88">纽约</li> <li data-id="119">洛杉矶&

javascript 的事件--阻止冒泡

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>测试</title></head><body>    <input type="button" id="btn1" value="点击">    <

jQuery阻止冒泡和HTML默认操作

jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包

页面内部DIV让点击外部DIV 事件不发生(阻止冒泡事件)

如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </script> 一般的google浏览器添加上面此项就可以,但是发现在FF下并不工作,于是有了如下: function getEvent(){ if(window.event) {return window.event;} func=getEvent.caller; while(func!=null){ var