关于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 相关文章推荐
关于window.pageYOffset和document.documentElement.scrollTop
Apr 05 Javascript
深入探究AngularJS框架中Scope对象的超级教程
Jan 04 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
Nov 09 Javascript
echarts学习笔记之箱线图的分析与绘制详解
Nov 22 Javascript
js数组去重的N种方法(小结)
Jun 07 Javascript
vue非父子组件通信问题及解决方法
Jun 11 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
使用flow来规范javascript的变量类型
Sep 12 Javascript
微信小程序实现手指拖动选项排序
Apr 22 Javascript
Openlayers测量距离与面积的实现方法
Sep 25 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创建PDF中文文档
2006/10/09 PHP
十天学会php(3)
2006/10/09 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php文件操作之文件写入字符串、数组的方法分析
2019/04/15 PHP
JavaScript Memoization 让函数也有记忆功能
2011/10/27 Javascript
js中有关IE版本检测
2012/01/04 Javascript
jquery 操作DOM案例代码分享
2012/04/05 Javascript
springMVC结合AjaxForm上传文件
2016/07/12 Javascript
jQuery 选择器(61种)整理总结
2016/09/26 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
vue项目中使用axios上传图片等文件操作
2017/11/02 Javascript
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
vue axios登录请求拦截器
2018/04/02 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
javascript中join方法实例讲解
2019/02/21 Javascript
Angular CLI 使用教程指南参考小结
2019/04/10 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
浅谈layui数据表格判断问题(加入表单元素),设置单元格样式
2019/10/26 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
通过滑动翻页效果实现和移动端click事件问题
2021/01/26 Javascript
Python ATM功能实现代码实例
2020/03/19 Python
python使用nibabel和sitk读取保存nii.gz文件实例
2020/07/01 Python
利用keras使用神经网络预测销量操作
2020/07/07 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
python 可视化库PyG2Plot的使用
2021/01/21 Python
一款纯css3实现的鼠标经过按钮特效教程
2014/11/09 HTML / CSS
美国在线宠物用品商店:Entirely Pets
2017/01/01 全球购物
澳大利亚当地社区首选的光学商店:1001 Optical
2019/08/24 全球购物
TALLY WEiJL法国网上商店:服装、时装及配饰
2019/08/31 全球购物
JD Sports澳洲官网:英国领先的运动鞋和运动时尚零售商
2020/02/15 全球购物
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
社区母亲节活动方案
2014/03/05 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
惊涛骇浪观后感
2015/06/05 职场文书