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 相关文章推荐
基于jQuery的js分页代码
Jun 10 Javascript
JavaScript定时器详解及实例
Aug 01 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
Aug 05 Javascript
js中删除数组中的某一元素实例(无下标时)
Feb 28 Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 Javascript
jQuery表单设置值的方法
Jun 30 jQuery
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
node中使用es6/7/8(支持性与性能)
Mar 28 Javascript
10个最受欢迎的 JavaScript框架(推荐)
Apr 24 Javascript
JavaScript实现单图片上传并预览功能
Sep 30 Javascript
vue操作dom元素的3种方法示例
Sep 20 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
学习php设计模式 php实现备忘录模式(Memento)
2015/12/09 PHP
php连接微软MSSQL(sql server)完全攻略
2016/11/27 PHP
PHP实现的XXTEA加密解密算法示例
2018/08/28 PHP
PHP PDOStatement::setFetchMode讲解
2019/02/03 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
2011/09/16 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
Javasipt:操作radio标签详解
2013/12/30 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
nodejs URL模块操作URL相关方法介绍
2015/03/03 NodeJs
异步加载JS、CSS代码(推荐)
2016/06/15 Javascript
ionic2懒加载配置详解
2017/09/01 Javascript
小程序实现授权登陆的解决方案
2018/12/02 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
iview实现动态表单和自定义验证时间段重叠
2021/01/10 Javascript
几个提升Python运行效率的方法之间的对比
2015/04/03 Python
python函数式编程学习之yield表达式形式详解
2018/03/25 Python
Python日期时间Time模块实例详解
2019/04/15 Python
python自动保存百度盘资源到百度盘中的实例代码
2019/08/26 Python
Python使用APScheduler实现定时任务过程解析
2019/09/11 Python
50行Python代码实现视频中物体颜色识别和跟踪(必须以红色为例)
2019/11/20 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
python文件编写好后如何实践
2020/07/07 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
世界上最好的足球商店:Unisport
2019/03/02 全球购物
澳大利亚网上买书:Angus & Robertson
2019/07/21 全球购物
《沉香救母》教学反思
2014/04/19 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
2016年庆祝六一儿童节活动总结
2016/04/06 职场文书
java实现面板之间切换功能
2022/06/10 Java/Android