事件冒泡 ,阻止事件冒泡 e.stopPropagation()

<1>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>冒泡</title>
    <script src="script/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("div li").click(function (e) {
                alert("我是li"); return false;
            })
            $("div ul").click(function (e) { //这个e其实就是event 是一个事件的对象
                alert("我是ul"); e.stopPropagation(); //e.stopPropagation();就是阻止冒泡,如果不写这句,在弹出 “我是li”后就会弹出“我是ul”,然后就会弹出“我是div”。在这里添加了e.stopPropagation();之后,“我是div”就不会弹出来了。因为已经被阻止了。其实这句也可也用 return false来替代
            })
            $("div").click(function (e) {
                alert("我是div");
            })
        })
    </script>
</head>
<body>
<div>
    <ul>
       <!-- li在ul里,ul在div中,只要点击了li,也就是点击了ul,也就是点击了div。在上面的函数中,先弹出 “我是li”然后弹出“我是ul”,最后弹出“我是div” 一层一层的冒泡,而阻止冒泡的方式就是调用 事件的对象来调用stopPropagation()方法。这个事件的对象就是函数的参数 e 这个e的名字可以随便取-->
        <li>请点击我</li>
    </ul>
</div>
</body>
</html>

事件冒泡 ,阻止事件冒泡 e.stopPropagation()

时间: 2024-10-06 13:14:15

事件冒泡 ,阻止事件冒泡 e.stopPropagation()的相关文章

阻止事件冒泡和事件捕获 阻止事件默认行为

阻止事件的传播:• 在W3c中,使用stopPropagation()方法• 在IE下设置cancelBubble = true:在捕获的过程中stopPropagation():后,后面的冒泡过程也不会发生了~ 阻止事件的默认行为,例如click <a>后的跳转~• 在W3c中,使用preventDefault()方法:• 在IE下设置window.event.returnValue = false;

javascript的事件冒泡,阻止事件冒泡和事件委托, 事件委托是事件冒泡的一个应用。

首先,弄明白js 当中,什么是事件,事件模型在js中是如何设计的.什么是事件冒泡? 什么是“事件冒泡”呢?假设这里有一杯水,水被用某种神奇的方式分成不同颜色的几层.这时,从最底层冒出了一个气泡,气泡会一层一层地上升,直到最顶层.而你不管在水的哪一层观察都可以看到并捕捉到这个气泡.好了,把“水”改成“DOM”,把“气泡”改成“事件”.这就是“事件冒泡” 什么是事件委托呢?event delegation : 地址:http://davidwalsh.name/event-delegate One

事件冒泡 &amp; 阻止事件冒泡

事件冒泡 : 当一个元素接收到事件的时候,会把他接收到的所有传播给他的父级,一直到顶层window.事件冒泡机制 阻止冒泡 : 当前要阻止冒泡的事件函数中调用 event.cancelBubble = true; 事件函数绑定: //oDiv1.onclick = fn1; 给oDiv加点击事件,给事件绑定一个函数. <script> window.onload = function() { var oBtn = document.getElementById('btn'); var oDiv

jquery阻止事件冒泡

以点击事件为例 <li class="hsub"> <a href="#"class="ajaxPage" class="dropdown-toggle"> 网站管理 </a> </li> li 与a元素都有点击事件,在默认情况下点击a标签则同样会触发li的点击事件,如需避免此情况只需在a的点击事件中阻止事件冒泡就行了 $("a.ajaxPage").clic

javascript里阻止事件冒泡

如下图所示,灰色块包含红色块,假设我们为灰色和红色块各绑定一个单击弹框事件,当我们点击红色块时,不希望触发灰色块的弹框事件,这就需要阻止冒泡事件了. IE里阻止冒泡事件使用cancelBubble属性,如果事件句柄想阻止事件传播到包容对象,必须把该属性设为 true. 火狐等非IE浏览器阻止冒泡事件使用stopPropagation()方法.调用该方法后,该节点上处理该事件的处理程序将被调用,事件不再被分派到其他节点. 我们看代码实例: <!doctype html> <html lan

Touch事件和阻止

1.Touch事件简介 pc上的web页面鼠 标会产生onmousedown.onmouseup.onmouseout.onmouseover.onmousemove的事件,但是在移动终端如 iphone.ipod  Touch.ipad上的web页面触屏时会产生ontouchstart.ontouchmove.ontouchend.ontouchcancel 事件,分别对应了触屏开始.拖拽及完成触屏事件和取消. 当按下手指时,触发ontouchstart: 当移动手指时,触发ontouchmo

JS的事件绑定、事件流模型

.t1 { background-color: #ff8080; width: 1100px; height: 40px } 一.JS事件 (一)JS事件分类 1.鼠标事件:click/dbclick/mouseover/mouseout2.HTML事件: onload/onunload/onsubmit/onresize/onchange/onfoucs/onscroll3.键盘事件: keydown:键盘按下时触发 keypress:键盘按下并抬起的瞬间触发. keyup:键盘抬起触发[注意

js阻止事件冒泡stopPropagation()、cancelBubble、preventDefault()、return false的分析

事件冒泡,举个列子: <li> <a href='http://www.baidu.com'>点击a</a> </li> <script> $('li').click(function () { alert('点击了li'); }); $('a').click(function () { alert('点击了a'); }); </script> 当你点击a的时候,会先弹出‘点击了a’,再弹出‘点击了li’,最后跳转到百度.简单理解就是

js阻止事件冒泡 return false / e.stopPropagation() /e.preventDefault()

由于每个元素在文档里面触发时都会冒泡 如果每个层上都有alert事件,那么触发里层div时,alert 里层,外层,最外层. 为了防止事件之间干扰,需要阻止事件冒泡. 一般使用e.stopPropagation(); ie8及其以下不支持,需要使用e.cancelBubble=false: 另外e是用来获得window的全局对象.e可以使用任意其他字母或者单词代替,比如a,b,c,d....,event,obj等等. 每当触发一个事件,系统都会给这个事件传一个对象,从而获得全局对象. 比如通过e