首页 > Web开发 > 详细

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

时间:2015-06-08 23:08:20      阅读:313      评论:0      收藏:0      [点我收藏+]

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被点了")后被阻止

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

原文:http://www.cnblogs.com/DillonFly/p/4561998.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!