关于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 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
JQuery实现绚丽的横向下拉菜单
Dec 19 Javascript
JS遍历Json字符串中键值对先转成JSON对象再遍历
Aug 15 Javascript
jquery渐隐渐显的图片幻灯闪烁切换实现方法
Feb 26 Javascript
jquery 构造函数在表单提交过程中修改数据
May 25 Javascript
jQuery实现表格元素动态创建功能
Jan 09 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
ES6学习教程之Map的常用方法总结
Aug 03 Javascript
webpack项目轻松混用css module的方法
Jun 12 Javascript
详解react-refetch的使用小例子
Feb 15 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
原生js+ajax分页组件
Jan 30 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获取当前文件所在目录 getcwd()函数
2009/05/13 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
php添加数据到xml文件的简单例子
2016/09/08 PHP
php头像上传预览实例代码
2017/05/02 PHP
php中通用的excel导出方法实例
2017/12/30 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
用Jquery实现多级下拉框无刷新的联动
2010/12/22 Javascript
js汉字转拼音实现代码
2013/02/06 Javascript
js判断横竖屏及禁止浏览器滑动条示例
2014/04/29 Javascript
JavaScript在IE和FF下的兼容性问题
2014/05/19 Javascript
Javascript实现单张图片浏览
2014/12/18 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
jQuery 选择同时包含两个class的元素的实现方法
2016/06/01 Javascript
Angular表格神器ui-grid应用详解
2017/09/29 Javascript
JS实现音乐导航特效
2020/01/06 Javascript
Javascript作用域和作用域链原理解析
2020/03/03 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
Python RuntimeError: thread.__init__() not called解决方法
2015/04/28 Python
Python对象转JSON字符串的方法
2016/04/27 Python
Python:Scrapy框架中Item Pipeline组件使用详解
2017/12/27 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python使用微信itchat接口实现查看自己微信的信息功能详解
2019/08/22 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
用python监控服务器的cpu,磁盘空间,内存,超过邮件报警
2021/01/29 Python
网络教育毕业生自我鉴定
2013/10/10 职场文书
工厂厂长岗位职责
2013/11/08 职场文书
快递业务员岗位职责
2014/01/06 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
模具数控专业自荐信
2014/01/27 职场文书
初中高效课堂实施方案
2014/02/26 职场文书
国庆节演讲稿
2014/05/27 职场文书
村级四风对照检查材料
2014/08/24 职场文书
增值税发票丢失证明
2015/06/19 职场文书
《实心球》教学反思
2016/02/23 职场文书
python基础学习之生成器与文件系统知识总结
2021/05/25 Python