关于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 相关文章推荐
jquery 获取json数据实现代码
Apr 27 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
JavaScript获取图片的原始尺寸以宽度为例
May 04 Javascript
jQuery实现iframe父窗体和子窗体的相互调用
Jun 17 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
Nov 17 Javascript
浅谈js之字面量、对象字面量的访问、关键字in的用法
Nov 20 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
JS实现获取进今年第几天是周几的方法分析
Jun 27 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
JavaScript this绑定过程深入详解
Dec 07 Javascript
JsonProperty 的使用方法详解
Oct 11 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
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
PHP实现C#山寨ArrayList的方法
2015/07/16 PHP
jQuery学习笔记之jQuery选择器的使用
2010/12/22 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
早该知道的7个JavaScript技巧
2016/06/21 Javascript
node.js入门学习之url模块
2017/02/25 Javascript
vue2笔记 — vue-router路由懒加载的实现
2017/03/03 Javascript
IScroll那些事_当内容不足时下拉刷新的解决方法
2017/07/18 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
mui上拉加载更多下拉刷新数据的封装过程
2017/11/03 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
详解在HTTPS 项目中使用百度地图 API
2019/04/26 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
2019/11/05 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
vue2路由基本用法实例分析
2020/03/06 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python传递参数方式小结
2015/04/17 Python
Python回调函数用法实例详解
2015/07/02 Python
解决python2.7用pip安装包时出现错误的问题
2017/01/23 Python
Python爬虫 bilibili视频弹幕提取过程详解
2019/07/31 Python
python nmap实现端口扫描器教程
2020/05/28 Python
python列表推导和生成器表达式知识点总结
2020/01/10 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
Python如何定义有默认参数的函数
2020/08/10 Python
夏威夷灵感服装及配饰:Reyn Spooner
2018/09/18 全球购物
巴基斯坦购物网站:Goto
2019/03/11 全球购物
2014年祖国生日寄语
2014/09/19 职场文书
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
工作失误检讨书(3篇)
2014/10/11 职场文书
继承权公证书范本
2015/01/23 职场文书
春季运动会开幕词
2015/01/28 职场文书
JavaScript实现登录窗体
2021/06/22 Javascript
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers