关于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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
一个简单的js动画效果代码
Jul 20 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
浅析JavaScript中作用域和作用域链
Dec 06 Javascript
jQuery+pjax简单示例汇总
Apr 21 jQuery
浅析为什么a=&quot;abc&quot; 不等于 a=new String(&quot;abc&quot;)
Oct 25 Javascript
Vue+axios+WebApi+NPOI导出Excel文件实例方法
Jun 05 Javascript
webpack4 配置 ssr 环境遇到“document is not defined”
Oct 24 Javascript
webpack4 optimization使用总结
Nov 10 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&amp;&amp;mysql)三
2006/10/09 PHP
用PHP伪造referer突破网盘禁止外连的代码
2008/06/15 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
php eval函数一句话木马代码
2015/05/21 PHP
php发送http请求的常用方法分析
2016/11/08 PHP
在Yii2特定页面如何禁用调试工具栏Debug Toolbar详解
2017/08/07 PHP
javascript实现跳转菜单的具体方法
2013/07/05 Javascript
js获取php变量的实现代码
2013/08/10 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
javascript图片切换综合实例(循环切换、顺序切换)
2016/01/13 Javascript
自己动手制作基于jQuery的Web页面加载进度条插件
2016/06/03 Javascript
javascript宿主对象之window.navigator详解
2016/09/07 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
微信小程序 天气预报开发实例代码源码
2017/01/20 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
vue+socket.io+express+mongodb 实现简易多房间在线群聊示例
2017/10/21 Javascript
Nginx设置为Node.js的前端服务器方法总结
2019/03/27 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
2020/04/07 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
wxPython中listbox用法实例详解
2015/06/01 Python
在Django的视图(View)外使用Session的方法
2015/07/23 Python
python脚本设置系统时间的两种方法
2016/02/21 Python
对pycharm代码整体左移和右移缩进快捷键的介绍
2018/07/16 Python
python+opencv+caffe+摄像头做目标检测的实例代码
2018/08/03 Python
python 将json数据提取转化为txt的方法
2018/10/26 Python
python保存二维数组到txt文件中的方法
2018/11/15 Python
详解pandas.DataFrame.plot() 画图函数
2020/06/14 Python
Python字符串的15个基本操作(小结)
2021/02/03 Python
英国家用电器购物网站:Hughes
2018/02/23 全球购物
委托书样本
2014/04/02 职场文书
悬崖上的金鱼姬观后感
2015/06/15 职场文书
靠谱的活动总结
2019/04/16 职场文书
使用springMVC所需要的pom配置
2021/09/15 Java/Android
Python OpenCV形态学运算示例详解
2022/04/07 Python