关于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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
javascript hashtable实现代码
Oct 13 Javascript
超简单的jquery的AJAX用法
May 10 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
js中reverse函数的用法详解
Dec 26 Javascript
jquery.post用法示例代码
Jan 03 Javascript
JavaScript解析json格式数据简单示例
Dec 09 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JavaScript中的Object对象学习教程
May 20 Javascript
基于vue2实现左滑删除功能
Nov 28 Javascript
JavaScript 跨域之POST实现方法
May 07 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 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 程式大小
2006/12/06 PHP
php中截取字符串支持utf-8
2007/01/18 PHP
php地址引用(php地址引用的效率问题)
2012/03/23 PHP
PHP实现提取一个图像文件并在浏览器上显示的代码
2012/10/06 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
Zend Framework使用Zend_Loader组件动态加载文件和类用法详解
2016/12/09 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
js动态加载以及确定加载完成的代码
2011/07/31 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
javascript操作css属性
2013/12/30 Javascript
比较不错的JS/JQuery显示或隐藏文本的方法
2014/02/13 Javascript
Javascript判断图片尺寸大小实例分析
2014/06/16 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
NodeJS中Buffer模块详解
2015/01/07 NodeJs
javascript实现图片跟随鼠标移动效果的方法
2015/05/13 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
2017/01/26 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
让webpack+vue-cil项目不再自动打开浏览器的方法
2018/09/27 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[28:42]Ti4正赛VG vs NEWBEE1
2014/07/19 DOTA
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
Python对象转换为json的方法步骤
2019/04/25 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
工程造价专业大学生自荐信
2013/10/01 职场文书
综合办公室个人的自我评价
2013/12/22 职场文书
幼教简历自我评价
2014/01/28 职场文书
上班打牌检讨书
2014/02/07 职场文书
认识实习感想
2015/08/10 职场文书
创业计划书介绍
2019/04/24 职场文书
详解CocosCreator消息分发机制
2021/04/16 Javascript