关于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 相关文章推荐
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
Sep 14 Javascript
DOM基础教程之使用DOM设置文本框
Jan 20 Javascript
javascript原始值和对象引用实例分析
Apr 25 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JS如何生成一个不重复的ID的函数
Dec 25 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
May 12 Javascript
CSS3结合jQuery实现动画效果及回调函数的实例
Dec 27 jQuery
微信小程序实现人脸检测功能
May 25 Javascript
vue-cli2.x项目优化之引入本地静态库文件的方法
Jun 19 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 Javascript
如何手写简易的 Vue Router
Oct 10 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网站来路获取代码(针对搜索引擎)
2010/06/08 PHP
使用php测试硬盘写入速度示例
2014/01/27 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP编译安装时常见错误解决办法
2015/05/28 PHP
浅谈thinkphp的nginx配置,以及重写隐藏index.php入口文件方法
2019/10/12 PHP
添加到收藏夹代码(兼容几乎所有的浏览器)
2007/01/09 Javascript
JavaScript 常用函数库详解
2009/10/21 Javascript
jQuery+PHP实现动态数字展示特效
2015/03/14 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
浅析node.js的模块加载机制
2018/05/25 Javascript
详解angular2如何手动点击特定元素上的点击事件
2018/10/16 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
python提示No module named images的解决方法
2014/09/29 Python
python多进程共享变量
2016/04/06 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
pandas实现to_sql将DataFrame保存到数据库中
2019/07/03 Python
Python中调用其他程序的方式详解
2019/08/06 Python
从pandas一个单元格的字符串中提取字符串方式
2019/12/17 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
简单掌握CSS3中resize属性的用法
2016/04/01 HTML / CSS
HTML5调用手机摄像头拍照的实现思路及代码
2014/06/15 HTML / CSS
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
高校毕业生自我鉴定
2013/10/27 职场文书
四年大学自我鉴定
2014/02/17 职场文书
廉洁自律演讲稿
2014/05/22 职场文书
个人授权委托书模板
2014/09/14 职场文书
党的群众路线教育实践活动查摆问题及整改措施
2014/10/10 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
2015年医院后勤工作总结
2015/05/20 职场文书
如何用python绘制雷达图
2021/04/24 Python