`
zhyt710
  • 浏览: 203323 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript防止事件传播

阅读更多

如下面代码

<div onclick=foo()>
<input type="button" value="test" onclick=bar()>
</div>

 当点按钮时,容器的onclick事件也会执行。有人把这种现象叫做冒泡。冒泡包括向上的或向下的。解决上面出现问题的方法在ie里只需要在bar()方法里加入 event.cancelBubble = true; 就可以了。

 

下面是从http://bbs.blueidea.com/thread-2855697-1-1.html得到的在firefox和ie中都可以运行的例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<style type="text/css">
	.adang{width:200px;height:50px;background:green;color:#fff;line-height:50px;text-align:center;margin-bottom:10px;}
</style>
<script type="text/javascript">
	function cancleEventUp(oevent){
		if(document.all) window.event.cancelBubble=true;
		else oevent.stopPropagation();
	}
	document.onclick=function(){
		alert("冒泡到document了");
	}
</script>
</head>
<body>
	<div class="adang" onclick="alert('阿当是帅哥');">点击我(不阻止冒泡)</div>
	<div class="adang" onclick="alert('阿当是帅哥');cancleEventUp(event);">点击我(阻止冒泡)</div>
</body>
</html>

 

  • test.rar (643 Bytes)
  • 描述: 上面例子的html文件
  • 下载次数: 10
分享到:
评论

相关推荐

    基于组件的框架Flight.zip

    Twitter称,该框架致力于构建基于现有DOM模型的应用程序,并可以将功能映射到DOM节点,且支持DOM的事件传播机制。 无论应用程序是否使用模板或生成HTML,Flight都不依赖于任何Web渲染技术,并且不关心请求如何被...

    proplock:用于防止由于在 mongodb 中传播而导致数据损坏的实用程序,以增强并发控制

    锁扣通过限制传播导致的损坏来增强 mongo 数据库并发控制的实用程序。 基于 semaphore.js安装npm install proplock --save用法var proplock = require('proplock'); var lock = proplock.lock; var unlock = ...

    lispkit:使用cffisbcl与webkitgtk交互的个人项目

    WebKit2具有线程分离功能,可防止对插入本地函数所需的Javascript Context进行原始访问。 关键事件 使用启用XCOMPOSEFILE序列的默认X输入法处理按键事件 然后,事件传播将停止,这样它们就不会像luakit中的当前错误...

    discord-factcheck-bot:借助Google的事实检查API,可以防止错误信息在不和谐的服务器中传播。 Hackathon冠军!

    这个错误的信息问题非常重要,因为阴谋论和谎言是诸如1月6日袭击美国首都之类事件的根本原因,该事件造成了巨大的破坏,人们感到不安全,并最终导致死亡。它能做什么Discord是建立社区,结识朋友,玩游戏和运行黑客...

    react-prevention:防止出现默认值并停止传播,但这是一种很好的方法。 当某些图书馆行为不当时很棒

    阻止事件和/或阻止元素行为的层。 为什么 看起来不错 有些图书馆不允许您处理事件,这是不得已的方法 例子 事件预防 您可以将任何想要受到影响的事件列为道具。 甚至只有一个! &lt; Button onClick = { this...

    Do_Action_Insert

    注意:它用于Submit表单事件,以防止不带Ajax的发送,以及用于Anchor阻止Href上的转换DoWithStopPropagation –停止继续传播事件(传播),但不取消事件。 注意:如果输出代理绑定到输入(类型Submit),则

    privacy-extension-chrome:为 Chrome 提供隐私

    通过限制标头字段(Accept、Cookie、Referer 和 User-Agent)和 JavaScript 对象或函数([removed]、navigator、Canvas.toDataURL 和 window.name)的暴露来防止浏览器和画布指纹。 您也可以设置自己的推荐人或...

    侦听dom节点bootcamp准备000

    通过JavaScript与DOM交互-Codealong 问题陈述 已经确定,我们可以轻松地操作DOM中的“节点”,以及随意创建和删除元素。 我们知道我们可以,那么我们究竟如何互动与页面上的节点? 好吧,我们听他们的! 目标 演示...

    js-dom-and-events-listening-to-dom-events-readme-v-000

    通过JavaScript与DOM交互-Codealong 问题陈述 已经确定,我们可以轻松地操作DOM中的“节点”,以及随意创建和删除元素。 我们知道我们可以,那么我们究竟如何互动与页面上的节点? 好吧,我们听他们的! 目标 演示...

    listening-to-dom-nodes-js-intro-000

    通过JavaScript与DOM交互-Codealong 问题陈述 已经确定,我们可以轻松地操作DOM中的“节点”,以及随意创建和删除元素。 我们知道我们可以,那么我们究竟如何互动与页面上的节点? 好吧,我们听他们的! 目标 演示...

    预防XSS攻击和SQL注入XssFilter

    对于跨站脚本攻击,黑客界共识是:跨站脚本攻击是新型的“缓冲区溢出攻击“,而JavaScript是新型的“ShellCode”。 二、XSS漏洞的危害 (1)网络钓鱼,包括盗取各类用户账号; (2)窃取用户cookies资料,从而获取...

    covid-sim:COVID-19模拟结果(可视化)

    请参阅该网站,以获取有关使用MATSim进行COVID-19疾病传播的信息,并采取了各种措施来防止其传播。 该自述文件详细介绍了网站本身的构建说明。项目先决条件该站点使用npm和yarn,并使用VS Code开发。 您应该先安装...

    Privacy Extension-crx插件

    此字段和您的Cookie设置将同时传播到以下两个字段:标头字段和JavaScript。 请注意,完全禁用cookie和JavaScript是限制指纹熵的最有效措施之一。 该软件是免费和开放源代码。 有关详细信息,请参见许可。 最新更改...

    隐私扩展「Privacy Extension」-crx插件

    此字段和您的Cookie设置将同时传播到以下两个字段:标头字段和JavaScript。 请注意,完全禁用cookie和JavaScript是限制指纹熵的最有效措施之一。 该软件是免费和开放源代码。 有关详细信息,请参见许可。 最新更改...

    CovidTracker:提供有关当前Covid情况的信息

    项目建议书该软件将允许用户不断了解他们进入他们要去的城市所面临的风险,从而有助于信息的传播。 当您进入一个城市时,该软件会告诉您您是否在COVID热点中,该城市的... 这将建议人们进行测试,以帮助防止病毒传播。

    精通AngularJS part1

    将模型变化传播给DOM291 同步DOM和模型变化292 Scope$apply——打开AngularJS世界的钥匙293 深入$digest循环295 整合300 112性能优化——设置期望值、测量、调节、并重复301 113AngularJS应用的性能优化303 ...

    Auto-jd:京东jd,低调使用,勿传播!(不定时更新脚本),gitee备份地址

    ###有条(科学)件(上网)的可以加入TG群防止失联,交流 TG群: 为防止仓库再次被封,本仓库仅保留腾讯云函数、elecV2P两种方式运行 想继续使用AC运行的朋友请移步原仓库,没有大的更新随缘维护: 使用教程(不要...

    twitter-grammarly-nlp:通过建议使用同义词来缓和已识别的强内容,从而防止在Twitter上发表仇恨言论

    我们认为,为了有效地限制攻击性内容在社交网站(SNS)上的传播,该平台应向用户展示系统如何感知该内容,突出显示最强词并提出建议。 这样做,用户可以完全意识到自己内容的后果,可以选择使自己的演讲符合原样或...

Global site tag (gtag.js) - Google Analytics