关于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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
浅谈jQuery animate easing的具体使用方法(推荐)
Jun 17 Javascript
js实现5秒倒计时重新发送短信功能
Feb 05 Javascript
WebSocket实现简单客服聊天系统
May 12 Javascript
layui文件上传实现代码
May 20 Javascript
vue 中自定义指令改变data中的值
Jun 02 Javascript
webpack构建react多页面应用详解
Sep 15 Javascript
详解ES6中的代理模式——Proxy
Jan 08 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 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 ? EasyUI DataGrid 资料取的方式介绍
2012/11/07 PHP
php使用标签替换的方式生成静态页面
2015/05/21 PHP
PHP之正则表达式捕获组与非捕获组(详解)
2015/07/29 PHP
Zend Framework入门知识点小结
2016/03/19 PHP
PHP错误提示It is not safe to rely on the system……的解决方法
2019/03/25 PHP
DOM相关内容速查手册
2007/02/07 Javascript
JQuery实现简单验证码提示解决方案
2012/12/20 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
jquery实现checkbox全选全不选的简单实例
2013/12/31 Javascript
javascript学习笔记(五)原型和原型链详解
2014/10/08 Javascript
举例讲解JavaScript中关于对象操作的相关知识
2015/11/16 Javascript
详解javascript跨浏览器事件处理程序
2016/03/27 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Pycharm学习教程(3) 代码运行调试
2017/05/03 Python
使用Python实现windows下的抓包与解析
2018/01/15 Python
Python使用min、max函数查找二维数据矩阵中最小、最大值的方法
2018/05/15 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
使用python-cv2实现Harr+Adaboost人脸识别的示例
2020/10/27 Python
python 实现客户端与服务端的通信
2020/12/23 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
利用CSS3实现文本框的清除按钮相关的一些效果
2015/06/23 HTML / CSS
突袭HTML5之Javascript API扩展2—地理信息服务及地理位置API学习
2013/01/31 HTML / CSS
英国网上购买门:Direct Doors
2018/06/07 全球购物
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
英语国培研修感言
2014/02/13 职场文书
一分钟演讲稿
2014/04/30 职场文书
员工安全生产责任书
2014/07/22 职场文书
查摆剖析材料范文
2014/09/30 职场文书
医生个人年终总结
2015/02/28 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
2015年小学生暑假总结
2015/07/13 职场文书
为什么MySQL选择Repeatable Read作为默认隔离级别
2021/07/26 MySQL