关于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 相关文章推荐
html下载本地
Jun 19 Javascript
清除网页历史记录,屏蔽后退按钮!
Dec 22 Javascript
js正文内容高亮效果的实现方法
Jun 30 Javascript
jquery解析json格式数据的方法(对象、字符串)
Nov 24 Javascript
批量下载对路网图片并生成html的实现方法
Jun 07 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JS解析url查询参数的简单代码
Aug 06 Javascript
Vue.js 表单控件操作小结
Mar 29 Javascript
微信小程序签到功能
Oct 31 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
May 24 Javascript
解决微信浏览器缓存站点入口文件(IIS部署Vue项目)
Jun 17 Javascript
vue 清空input标签 中file的值操作
Jul 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中使用Oracle数据库(6)
2006/10/09 PHP
PHP文件上传实例详解!!!
2007/01/02 PHP
php正则匹配文章中的远程图片地址并下载图片至本地
2015/09/29 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
疯狂Jquery第一天(Jquery学习笔记)
2012/05/11 Javascript
js 如何实现对数据库的增删改查
2012/11/23 Javascript
jQuery中fadeIn、fadeOut、fadeTo的使用方法(图片显示与隐藏)
2013/05/08 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
jQuery中:selected选择器用法实例
2015/01/04 Javascript
Windows系统下Node.js的简单入门教程
2015/06/23 Javascript
Bootstrap基本样式学习笔记之按钮(4)
2016/12/07 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
angular实现spa单页面应用实例
2017/07/10 Javascript
基于Two.js实现星球环绕动画效果的示例
2017/11/06 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
Vue3 中的数据侦测的实现
2019/10/09 Javascript
ckeditor一键排版功能实现方法分析
2020/02/06 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
vue实现移动端项目多行文本溢出省略
2020/07/29 Javascript
python 布尔操作实现代码
2013/03/23 Python
python中List的sort方法指南
2014/09/01 Python
python实现复制整个目录的方法
2015/05/12 Python
NumPy 数学函数及代数运算的实现代码
2018/07/18 Python
使用python opencv对目录下图片进行去重的方法
2019/01/12 Python
python opencv 读取本地视频文件 修改ffmpeg的方法
2019/01/26 Python
python控制nao机器人身体动作实例详解
2019/04/29 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
Python调用C/C++的方法解析
2020/08/05 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
浅谈关于html5中图片抛物线运动的一些心得
2018/01/09 HTML / CSS
如何打开WebSphere远程debug
2014/10/10 面试题
考博自荐信
2013/10/25 职场文书
2014年党建工作总结
2014/11/11 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
行为规范主题班会
2015/08/13 职场文书
关于教师节的广播稿
2015/08/19 职场文书