关于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获取div高度的代码
Aug 09 Javascript
jQuery使用动态渲染表单功能完成ajax文件下载
Jan 15 Javascript
js 表单提交后按钮变灰的实例代码
Aug 16 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
使用Chrome浏览器调试AngularJS应用的方法
Jun 18 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
微信小程序 标签传入数据
May 08 Javascript
vue监听浏览器原生返回按钮,进行路由转跳操作
Sep 09 Javascript
微信小程序绘制半圆(弧形)进度条
Nov 18 Javascript
js正则匹配markdown里的图片标签的实现
Mar 24 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中使用gettext来支持多语言的方法
2011/05/02 PHP
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php MessagePack介绍
2013/10/06 PHP
php的sso单点登录实现方法
2015/01/08 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
php实现头像上传预览功能
2017/04/27 PHP
javascript 写类方式之二
2009/07/05 Javascript
jQuery的ajax下载blob文件
2016/07/21 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
jquery实现图片上传前本地预览
2017/04/28 jQuery
BootStrap selectpicker后台动态绑定数据的方法
2017/07/28 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
Vue3.x源码调试的实现方法
2019/10/13 Javascript
vue子组件改变父组件传递的prop值通过sync实现数据双向绑定(DEMO)
2020/02/01 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
关于反爬虫的一些简单总结
2017/12/13 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
django foreignkey外键使用的例子 相当于left join
2019/08/06 Python
一行python实现树形结构的方法
2019/08/09 Python
python GUI库图形界面开发之PyQt5时间控件QTimer详细使用方法与实例
2020/02/26 Python
Python实时监控网站浏览记录实现过程详解
2020/07/14 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
python中lower函数实现方法及用法讲解
2020/12/23 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
css3 2D图片转动样式可以扩充到Js当中
2014/04/29 HTML / CSS
AVIS安飞士奥地利租车官网:提供奥地利、欧洲和全世界汽车租赁
2016/11/29 全球购物
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
小学生毕业评语
2014/12/26 职场文书
护士求职自荐信
2015/03/25 职场文书
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
SQL SERVER触发器详解
2022/02/24 SQL Server
Java Spring Lifecycle的使用
2022/05/06 Java/Android