关于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 nextSibling属性和previousSibling属性概述及使用注意
Feb 16 Javascript
JavaScript版TAB选项卡效果实例
Aug 16 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
jquery全选checkBox功能实现代码(取消全选功能)
Dec 10 Javascript
基于JS实现导航条flash导航条
Jun 17 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
JavaScript正则替换HTML标签功能示例
Mar 02 Javascript
angularjs实现柱状图动态加载的示例
Dec 11 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
微信小程序 接入腾讯地图的两种写法
Jan 12 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/31 PHP
php 移除数组重复元素的一点说明
2008/11/27 PHP
超级简单的php+mysql留言本源码
2009/11/11 PHP
支持中文的php加密解密类代码
2011/11/27 PHP
ThinkPHP3.1新特性之G方法的使用
2014/06/19 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP实现抓取迅雷VIP账号的方法
2015/07/30 PHP
EarthLiveSharp中cloudinary的CDN图片缓存自动清理python脚本
2017/04/04 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
jQuery toggle()设置CSS样式
2009/11/05 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
2013/12/16 Javascript
js 通用订单代码
2013/12/23 Javascript
js中Math之random,round,ceil,floor的用法总结
2013/12/26 Javascript
通过JS来判断页面控件是否获取焦点
2014/01/03 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
不同js异步函数同步的实现方法
2016/05/28 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
2016/06/13 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
canvas绘图不清晰的解决方案
2017/02/28 Javascript
js Date()日期函数浏览器兼容问题解决方法
2017/09/12 Javascript
基于 Vue.js 2.0 酷炫自适应背景视频登录页面实现方式
2018/01/17 Javascript
Vue实现兄弟组件间的联动效果
2020/01/21 Javascript
[15:09]DOTA2国际邀请赛采访专栏:Loda
2013/08/06 DOTA
Python Web开发模板引擎优缺点总结
2014/05/06 Python
解决Django 在ForeignKey中出现 non-nullable field错误的问题
2019/08/06 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
用python读取xlsx文件
2020/12/17 Python
英国内衣连锁店:Boux Avenue
2018/01/24 全球购物
销售高级职员求职信
2013/10/29 职场文书
大学生职业生涯规划书
2014/03/14 职场文书
企业法人代表任命书
2014/06/06 职场文书
党员个人对照检查材料范文
2014/09/24 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书
导游词之黄果树瀑布
2019/09/20 职场文书