js阻止事件追加的具体实现


Posted in Javascript onOctober 15, 2014

有些时候可以使用 e.stopPropagation(); e.preventDefault();来阻止事件冒泡,和默认事件的执行。但不能阻止事件的追加。

什么情况下要阻止事件的追加呢?

比如:

点击“结账”,这样的操作时,结账本身有自己的事件,但结账前要判断是否登录。

我们可能会这样写:

Js代码

if(isLogin){ //判断是否登录 

console.log("没有登录") 

}else{ 

//结账相关代码 

}
如果点击“我的主页”也有登录判断

登录判断代码
if(isLogin){ //判断是否登录 

console.log("没有登录") 

}else{ 

//个人中心 

}

如果还有更多的登录判断。是不是就会有更多像上面的代码呢?后来我发现stopImmediatePropagation()这个方法, 阻止事件追加。上面的问题就不是问题了。

重要:.确保登录判断事件是第一个绑定的事件。

Demo代码

<!DOCTYPE html> 

<html> 

<head lang="en"> 

<meta charset="UTF-8"> 

<title>demo</title> 

<script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script> 

</head> 

<body> 
<a href="#" class="bill isLogin">结账 </a> 


<ul> 

<li class="a1 isLogin">加入收藏夹</li> 

<li class="a2 isLogin">他人支付</li> 

<li class="a3">加入购入车</li> 

<li class="a4 isLogin">我的主页</li> 

</ul> 

<script> 

//最先绑定 

$(".isLogin").on("click", function (e) { 

if(true){ //登录判断 

alert("没有登录"); 

e.stopImmediatePropagation(); 

} 

return false; 

}); 

$(".bill").on("click",function(){ 

alert("结账相关内容!"); 

}); 

$(".a1").on("click",function(){ 

alert("a1"); 

}); 

$(".a2").on("click",function(){ 

alert("a2"); 

}); 

$(".a3").on("click",function(){ 

alert("已加入购物车"); 

}); 

$(".a4").on("click",function(){ 

alert("有登录判断"); 

}); 


</script> 

</body> 

</html>

其实,jquery给我们提供了查看事件的方法$._data($('.isLogin').get(0)),打开firebug,在控制台输入。
Js代码

$._data($('.isLogin').get(0))

会看到如下:

Js代码

Object { events={...}, handle=function()}

点击可以看到事件数组,方便查看元素上绑定了什么样的事件。

Javascript 相关文章推荐
通用javascript脚本函数库 方便开发
Oct 13 Javascript
node.js中的fs.createWriteStream方法使用说明
Dec 17 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
js实现微信分享代码
Oct 11 Javascript
基于JavaScript的操作系统你听说过吗?
Jan 28 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
JavaScript实现垂直向上无缝滚动特效代码
Nov 23 Javascript
js判断手机系统是android还是ios
Mar 07 Javascript
详解在Vue中有条件地使用CSS类
Sep 30 Javascript
JavaScript中this的全面解析及常见实例
May 14 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
详解微信小程序动画Animation执行过程
Sep 23 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 #Javascript
原生的html元素选择器类似jquery选择器
Oct 15 #Javascript
用原生JS获取CLASS对象(很简单实用)
Oct 15 #Javascript
通过JS动态创建一个html DOM元素并显示
Oct 15 #Javascript
javascript模拟实现ajax加载框实例
Oct 15 #Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 #Javascript
微信分享的标题、缩略图、连接及描述设置方法
Oct 14 #Javascript
You might like
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
使用PHP获取汉字的拼音(全部与首字母)
2013/06/27 PHP
如何取得中文字符串中出现次数最多的子串
2013/08/08 PHP
PHP调用JAVA的WebService简单实例
2014/03/11 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP微信PC二维码登陆的实现思路
2017/07/13 PHP
javascript 学习笔记(八)javascript对象
2011/04/12 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
用循环或if语句从json中取数据示例
2014/08/18 Javascript
javascript日期格式化方法小结
2015/12/17 Javascript
jQuery判断浏览器并动态调整select宽度的方法
2016/03/02 Javascript
详解vue.js2.0父组件点击触发子组件方法
2017/05/10 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
跟老齐学Python之折腾一下目录
2014/10/24 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
Python简单遍历字典及删除元素的方法
2016/09/18 Python
tensorflow: 查看 tensor详细数值方法
2018/06/13 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
pycharm激活码快速激活及使用步骤
2020/03/12 Python
Scrapy框架介绍之Puppeteer渲染的使用
2020/06/19 Python
3分钟看懂Python后端必须知道的Django的信号机制
2020/07/26 Python
突袭HTML5之Javascript API扩展3—本地存储全新体验
2013/01/31 HTML / CSS
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Foot Locker意大利官网:全球领先的运动鞋和服装零售商
2017/05/30 全球购物
介绍下Java的输入输出流
2014/01/22 面试题
上课迟到检讨书
2014/01/19 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
乡镇信息公开实施方案
2014/03/23 职场文书
本科生就业推荐信
2014/05/19 职场文书
体操比赛口号
2014/06/10 职场文书
2014机关党员干部“正风肃纪”思想汇报
2014/09/15 职场文书
创业计划书之都市休闲农庄
2019/12/28 职场文书
业余无线电通联Q语
2022/02/18 无线电