收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 6555|回复: 9

addEventListener如何在一个事件触发后阻止后续绑定事件的发生

[复制链接]
发表于 2011-12-20 12:48:53 | 显示全部楼层 |阅读模式
本帖最后由 oror 于 2011-12-20 12:49 编辑

利用addEventListener绑定多个事件,如何让某个事件阻止后续事件发生?
比如下面的代码,按钮上绑定注册了sayHello()和sayByeBye()两个函数,如何在sayHello()内部阻止下一个事件sayByeBye()的发生,也就是说虽然绑定了两个事件,但是sayHello()一个执行,当然不能注销sayByeBye()这个事件。
网上找了半天:
        preventDefault()这个只能阻止元素默认行为,相应事件依旧能够依次执行。
        stopPropagation()以及cancelBubble只能阻止事件冒泡到父元素,依旧不是我想要的。
请教各位,谢谢大家!

 提示:您可以先修改部分代码再运行

发表于 2011-12-20 13:21:17 | 显示全部楼层
添加监听,看是不是你想要的效果
  1. <html>
  2. <head></head>
  3. <body>
  4. <input type="button" id="btn" value="ClickMe" />

  5. <script type="text/javascript">
  6. var flag=0;
  7. function addListener(element, e, fn) {
  8.     if (element.addEventListener) {
  9.         element.addEventListener(e, fn, false);
  10.     } else {
  11.         element.attachEvent("on" + e, fn);
  12.     }
  13. }

  14. window.onload = function(){
  15.     var btn = document.getElementById("btn");
  16.     addListener(btn, "click", sayHello);
  17.     addListener(btn, "click", sayByeBye);
  18.    
  19. }

  20. function sayHello() {
  21.     alert("Hello");
  22.     flag=1;//添加监听,如果flag=1,不执行函数sayByeBye里面的代码;flag等于其他,执行sayByeBye里面的代码
  23. }

  24. function sayByeBye() {
  25.         if(flag==1){
  26.             return;
  27.         }
  28.         alert("ByeBye");
  29. }
  30. </script>

  31. </body>
  32. </html>
复制代码
回复 支持 反对

使用道具 举报

发表于 2011-12-20 14:06:43 | 显示全部楼层
return false;
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-12-20 15:37:02 | 显示全部楼层
annfoo 发表于 2011-12-20 13:21
添加监听,看是不是你想要的效果

恩,谢谢回复,不过如果两次绑定的事件分属不同的模块或者文件就比较麻烦了,主要函数模块都是隔离的,共享全局标志变量的办法可能比较难以实施。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-12-20 15:39:20 | 显示全部楼层
qp3db 发表于 2011-12-20 14:06
return false;

谢谢回复,不过这个办法没有效果,加上return false后,后续绑定的事件依然执行了。IE8、Chrome测试。
回复 支持 反对

使用道具 举报

发表于 2011-12-20 16:00:46 | 显示全部楼层
removeEventListener啊
回复 支持 反对

使用道具 举报

发表于 2011-12-20 16:37:56 | 显示全部楼层
大家的JS都是怎么学来的啊,看书吗?
回复 支持 反对

使用道具 举报

发表于 2011-12-20 17:44:55 | 显示全部楼层
oror 发表于 2011-12-20 15:39
谢谢回复,不过这个办法没有效果,加上return false后,后续绑定的事件依然执行了。IE8、Chrome测试。
  1. <html>
  2. <head></head>
  3. <body>
  4. <input type="button" id="btn" value="ClickMe" />

  5. <script type="text/javascript">
  6. var flag = 0;
  7. var btn = document.getElementById("btn");

  8. btn.onclick = function() {
  9.         sayReturn(flag);
  10. }
  11. function sayReturn(number) {
  12.         if (number == 0) {
  13.                 alert(flag);
  14.                 flag = 1;
  15.         }else{
  16.                 alert(flag);
  17.                 flag = 0;
  18.         }
  19. }
  20. </script>

  21. </body>
  22. </html>
复制代码
这个方法就可以啊。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-12-20 18:10:47 | 显示全部楼层
本帖最后由 oror 于 2011-12-20 18:11 编辑
qp3db 发表于 2011-12-20 17:44
这个方法就可以啊。

这个方法可以是可以,就是耦合比较高,模块化略有麻烦。
恩,谢谢回复,不过如果两次绑定的事件分属不同的模块或者文件就比较麻烦了,主要函数模块都是隔离的,共享全局标志变量的办法可能比较难以实施。

另外我希望通过注册事件的方式绑定多个函数,针对一个元素,比如甲开发的模块A,命名为A.js,内部调用了addEventListener绑定了一个事件,乙开发的模块B,命名为B.js,同样的内部调用了addEventListener绑定了一个事件,可能还有丙丁等C、D模块同样给这个元素绑定了事件,现在希望A模块绑定的事件触发一个条件时就取消下面绑定的B、C、D等等事件的执行,不过谢谢你的回复。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-12-20 18:32:37 | 显示全部楼层
yxkyo 发表于 2011-12-20 16:00
removeEventListener啊

谢谢回复,我记得这个要传入函数名才可以使用,假如我不知道函数名,或者我想进行多个模块分别隔离开发,我这个模块绑定了一个事件,其余N个模块也可能绑定了事件,我这个模块不知道其他绑定了多少模块以及模块的名称,只是希望在某个条件成立的情况下立即停止接下来模块绑定的事件执行。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-25 08:56 , Processed in 0.171445 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表