华山资源网

理解jquery事件冒泡
网络编程 2024/11/15 佚名
3 1

一、什么是jquery事件冒泡
在很多教材或者手册都可能会涉及到事件冒泡的概念，老手来说这当然是最基本的概念，但往往对于初学者可能比较陌生或者说从来没有听说过。下面就结合代码实例来简单介绍一下什么是事件冒泡。
代码实例如下:

<html>
<head>
<meta charset=" gb2312">
<title>事件冒泡</title>
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-1.8.3.js">


在以上代码中，我们可能只想点击锚点后弹出“我是third”，但是令人奇怪的事情却是所有父元素定义的click事件都会被触发。这就是一个典型的事件冒泡效果。所谓的冒泡事件就是，如果在某一个对象上触发某一类事件（如上例的click事件），那么此事件会向对象的父级对象传播，并触发父对象上定义的同类事件。事件传播的方向是从最底层到最顶层，类似于水泡从水底浮上来一般。

二、javascript如何阻止事件冒泡

冒泡事件能够带来便利，有时候也会带来麻烦，下面就简单介绍一下如何阻止事件冒泡。

代码实例如下:







<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<head>
<title>事件冒泡</title>
<style type="text/css">
#grandfather{
 border:1px solid #0066FF;
 cellpadding:0px;
 cellspacing:0px;
}
#grandfather td{
 border: 1px solid #0066FF;
}
</style>
<script type="text/javascript">
function trclick(){
 alert("父亲的onclick事件触发");
}
function tableclick(){
 alert("祖父的onclick事件触发");
}
window.onload=function(){
 var grandfather=document.getElementById("grandfather");
 var father=document.getElementById("father");
 var noStop=document.getElementById("noStop");
 var haveStop=document.getElementById("haveStop");
 
 grandfather.onclick=tableclick;
 father.onclick=trclick;
 
 noStop.onclick=function(){
 alert("没有阻止冒泡的子元素");
 }
 haveStop.onclick=function(evt){
 alert("阻止冒泡的子元素");
 if(window.event){
 event.cancelBubble=true;
 }
 else if(evt){
 evt.stopPropagation();
 }
 }
}
</script>
</head>
<body>
<table width="204" id="grandfather">
 <tr >
 <td width="96"></td>
 <td width="96"></td>
 </tr>
 <tr id="father">
 <td id="noStop">没有阻止事件冒泡</td>
 <td id="haveStop">阻止了事件冒泡</td>
 </tr>
 <tr>
 <td> </td>
 <td> </td>
 </tr>
</table>
</body>
</html>





代码注释:

1.if(window.event)这个用来兼容IE8和IE8一下浏览器。

2. evt.stopPropagation()这个是标准浏览器。


以上代码中，一个单元格阻止了事件冒泡，一个没有阻止事件冒泡，希望对大家的学习有所帮助。
华山资源网 Design By www.eoogi.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
华山资源网 Design By www.eoogi.com
www.eoogi.com 华山资源网
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
华山资源网 Design By www.eoogi.com