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

jQuery代码

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

HTML代码

<table onclick="alert(‘table‘)">
  <tr onclick="alert(‘tr‘)"><td onclick="alert(‘td‘)"><p onclick="alert(‘p‘)">1111222</p></td></tr>
</table>
<table id="t1">
  <tr id="tr1"><td id="td1"><p id="p1">hgdfjkgh</p></td></tr>
</table>

当点击(1111222)时第一个table中的点击相应顺序为p,td,tr,table

当点击(hgdfjkgh)时由于在jQuery代码中设置了阻止冒泡时间,使相应在alert("td1被点了")后被阻止

时间: 2024-10-11 23:14:38

jQuery中的冒泡事件和阻止冒泡的相关文章

最简单冒泡事件及阻止冒泡事件

html代码 <script id="jquery_183" type="text/javascript" class="library" src="/js/sandbox/jquery/jquery-1.8.3.min.js"></script> <div id="div1" style="height:200px;width:200px;background-co

js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME)

网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 var addEvent = function( obj, type, fn ) { if (obj.addEventListener) obj.addEventListener( type, fn, false ); else if (obj.attachEvent) { obj["e"+type+fn] = fn; obj.attachEvent( "on"+type, function() {

DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理

事件对象——兼容处理 1 /* 2 * 功能: 事件对象兼容 3 * 参数: 表示常规浏览器的事件对象e 4 */ 5 function getEvent(e) { 6 7 // 如果存在e存在,直接返回,否则返回window.event 8 return e || window.event; 9 } 获取事件所对应的目标——兼容处理 1 /* 2 3 * 功能: 获取事件所对应的目标 4 5 * 参数: 表示常规浏览器的事件对象e 6 7 */ 8 9 function getTargetBy

网站开发div在Jquery中的鼠标事件失去焦点

网站div在Jquery中的鼠标事件失去焦点,今天在做网站开发的时候遇到了个问题,就是我在用Jquery做导航的时候,用到了Jquery的鼠标事件mouseout,但问题出来了,我有两个div,A的div包含了B的div,本来我是想当鼠标移出A的div的时候隐藏div,可是当我的鼠标移到B的div在移出的时候也会触发jquery的隐藏事件,这让人很头痛. 在网上搜了下,找到了解决的法子,就是直接把mouseout换成了mouseleave就可以了,具体的问题请大家参考Jquery的开发文档吧

&lt;jQuery&gt; &lt;方法&gt; 十八. 移除事件, 触发事件, 事件对象(阻止冒泡, 阻止跳转)

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <p>RayLee</p> <p>RayLee</p> <p>RayLee</p> <input

点击事件阻止缺省事件以及阻止冒泡

1 function stopEvent(e){ 2 stopDefault(e); 3 stopBubble(e); 4 } 5 //阻止缺省事件发生 6 function stopDefault(e){ 7 if(e.preventDefault){ 8 e.preventDefault(); 9 }else{ 10 e.returnValue=false; 11 } 12 } 13 //阻止冒泡发生 14 function stopBubble(e){ 15 if(e.stopPropag

JS点击子元素不触发父元素点击事件(js阻止冒泡)

<html> <title></title> <head> <meta charset="utf-8"> <style type="text/css"> .divone{width:100px;height:100px;background:black;position: relative;cursor: pointer} .divchild{position: absolute;margin:

阻止默认事件和阻止冒泡的应用场景

阻止默认事件,比如这个: <a href="https://www.baidu.com"> <div> <span>取消</span> </div> </a> 比如这样的一个需求 点击取消按钮的时候会触发一些js动作,但是不能让这个div产生跳转行为,所以需要在点击取消的时候 阻止冒泡,防止其跳转. 阻止冒泡,比如最简单的弹出层,当点击确认提交按钮的时候实际上点击事件是会往上冒泡,而一般我们取消遮罩的时候,都是通过

冒泡事件极其阻止方法

<div onclick="a()">     <div onclick="b()">      <a id="a" href="" onclick="c()">点击我</a>     </div>    </div> 当点击"点击我"按钮的时候,会依次执行 方法 c(),b(),a()方法 这就属于冒泡事件 阻止方