关于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 相关文章推荐
禁止刷新,回退的JS
Nov 25 Javascript
jquery 插件学习(二)
Aug 06 Javascript
css transform 3D幻灯片特效实现步骤解读
Mar 27 Javascript
js用拖动滑块来控制图片大小的方法
Feb 27 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
flag和jq on 的绑定多个对象和方法(必看)
Feb 27 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
iview在vue-cli3如何按需加载的方法
Oct 31 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
微信小程序实现点击导航条切换页面
Nov 19 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+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
新页面打开实际尺寸的图片
2006/08/25 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
2014/03/18 Javascript
nodejs批量修改文件编码格式
2015/01/22 NodeJs
jQuery匹配文档链接并添加class的方法
2015/06/26 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
关于json字符串与实体之间的严格验证代码
2016/11/10 Javascript
详解js中Number()、parseInt()和parseFloat()的区别
2016/12/20 Javascript
Vue2.0实现1.0的搜索过滤器功能实例代码
2017/03/20 Javascript
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
JS实现快递单打印功能【推荐】
2018/06/21 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
javascript使用substring实现的展开与收缩文字功能示例
2019/06/17 Javascript
vue实现简单的日历效果
2020/09/24 Javascript
Python实现GUI学生信息管理系统
2020/04/05 Python
python版本的仿windows计划任务工具
2018/04/30 Python
浅析Python四种数据类型
2018/09/26 Python
用Python编写一个简单的CS架构后门的方法
2018/11/20 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
python实现微信自动回复及批量添加好友功能
2019/07/03 Python
使用python将最新的测试报告以附件的形式发到指定邮箱
2019/09/20 Python
Python Tensor FLow简单使用方法实例详解
2020/01/14 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
META-INF文件夹中的MANIFEST.MF的作用
2016/06/21 面试题
市三好学生主要事迹
2014/01/28 职场文书
大学生心理活动总结
2014/07/04 职场文书
综合素质评价思想道德自我评价
2015/03/09 职场文书
2016廉洁从政心得体会
2016/01/19 职场文书
小学一年级数学教学反思
2016/02/16 职场文书
Python机器学习之底层实现KNN
2021/06/20 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers