关于javascript event flow 的一个bug详解


Posted in Javascript onSeptember 17, 2013

我最近调netsurf也遇到一个相关的bug : alert() 被调了两次。html 代码:

<html>
<head>
<title>alert onclick example</title>
<script type="text/javascript">
function causealert()
{
var txt = document.getElementById("p1").textContent;
alert(txt);
}
</script>
</head>
<body>
<div style="border: 1px solid red">
<p id="p1">First line of paragraph.<br /></p>
</div><br />
<button id="button1" >add another textNode.</button>
<script>
var Button1 = document.getElementById("button1");
/*var Button1Click = function() { alert(1); };    
Button1.addEventListener("click", Button1Click, false);*/
Button1.onclick = causealert;
</script>
</body>
</html>

     通过gdb, 定位到是_dom_node_dispatch_event()里面的问题:
   /* The capture phase */ for (targetnr = ntargets; targetnr > 0; --targetnr)...
/* Bubbling phase */
 evt->phase = DOM_BUBBLING_PHASE;
 for (targetnr = 0; targetnr < ntargets; ++targetnr)

 

事件流是这样的: p1(root)-->p2-->... --> pm --> T  (capturing phase), T (target phase), T--> pm --> ... --> p1 (bubbling phase).

规范规定capturing 和bubbling 只能选其一, 代码中在 js_dom_event_add_listener()是选capturing。因此就解释了为什么alert 被执行两回了。

修改: 根据DOM 3 规范,把上面的0改成1就行了。

Javascript 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
怎么清空javascript数组
May 11 Javascript
JavaScript淡入淡出渐变简单实例
Aug 06 Javascript
深入浅析JavaScript的API设计原则
Jun 14 Javascript
JavaScript 随机验证码的生成实例代码
Sep 22 Javascript
微信开发 微信授权详解
Oct 21 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
webpack中如何使用雪碧图的示例代码
Nov 11 Javascript
详解webpack引用jquery(第三方模块)的三种办法
Aug 21 jQuery
Vue中引入svg图标的两种方式
Jan 14 Vue.js
JavaScript 定时器详情
Nov 11 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
Node.js开发指南中的简单实例(mysql版)
Sep 17 #Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 #Javascript
判断一个变量是数组Array类型的方法
Sep 16 #Javascript
jquery实现div阴影效果示例代码
Sep 16 #Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 #Javascript
document.documentElement和document.body区别介绍
Sep 16 #Javascript
使用js在页面中绘制表格核心代码
Sep 16 #Javascript
You might like
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP中PDO事务处理操作示例
2018/05/02 PHP
Prototype使用指南之array.js
2007/01/10 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
jQuery1.6 使用方法二
2011/11/23 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
2013/04/26 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
浅谈js的异步执行
2016/10/18 Javascript
js中通过getElementsByName访问name集合对象的方法
2016/10/31 Javascript
javascript实现文字无缝滚动
2016/12/27 Javascript
Vue-Router实现页面正在加载特效方法示例
2017/02/12 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
2017/03/13 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Python时间的精准正则匹配方法分析
2017/08/17 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
django 修改server端口号的方法
2018/05/14 Python
Windows 8.1 64bit下搭建 Scrapy 0.22 环境
2018/11/18 Python
Python中按键来获取指定的值
2019/03/02 Python
python 字典访问的三种方法小结
2019/12/05 Python
python实现高斯投影正反算方式
2020/01/17 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
浅析HTML5 Landmark
2020/09/11 HTML / CSS
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
英国最大的在线快递公司之一:ParcelHero
2019/11/04 全球购物
运动鞋、街头服装、手表和手袋的实时市场:StockX
2020/11/25 全球购物
异步传递消息系统的作用
2016/05/01 面试题
一封普通求职者的求职信
2013/11/20 职场文书
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
2015年妇联工作总结范文
2015/04/22 职场文书
《怀念母亲》教学反思
2016/02/19 职场文书
撤回我也能看到!教你用Python制作微信防撤回脚本
2021/06/11 Python
浅谈Node的内存泄露问题
2022/05/06 NodeJs