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获取元素文档大小、偏移和位置和滚动条位置的方法集合
Jan 12 Javascript
jQuery 联动日历实现代码
May 31 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
node.js不得不说的12点内容
Jul 14 Javascript
JavaScript开发人员的10个关键习惯小结
Dec 05 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
input file上传 图片预览功能实例代码
Oct 25 Javascript
js cookie实现记住密码功能
Jan 17 Javascript
js获取指定时间的前几秒
Apr 05 Javascript
React优化子组件render的使用
May 12 Javascript
亲自动手实现vue日历控件
Jun 26 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中的魔术方法详解
2013/06/17 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
javascript中简单的进制转换代码实例
2013/10/26 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
DOM节点深度克隆函数cloneNode()用法实例
2015/01/12 Javascript
Nodejs抓取html页面内容(推荐)
2016/08/11 NodeJs
jQuery实现的图片轮播效果完整示例
2016/09/12 Javascript
Select2.js下拉框使用小结
2016/10/24 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
简单的三步vuex入门
2018/05/20 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
vue引入axios同源跨域问题
2018/09/27 Javascript
Vue开发之封装分页组件与使用示例
2019/04/25 Javascript
django中使用vue.js的要点总结
2019/07/07 Javascript
JS实现关闭小广告特效
2021/01/29 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
Python中的闭包实例详解
2014/08/29 Python
python比较两个列表大小的方法
2015/07/11 Python
Python安装使用命令行交互模块pexpect的基础教程
2016/05/12 Python
对python:threading.Thread类的使用方法详解
2019/01/31 Python
torch 中各种图像格式转换的实现方法
2019/12/26 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
python 利用百度API识别图片文字(多线程版)
2020/12/14 Python
python 通过exifread读取照片信息
2020/12/24 Python
澳大利亚礼品卡商店:Gift Card Store
2019/06/24 全球购物
美国高端牛仔品牌:Silver Jeans
2019/12/12 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
教师自我反思材料
2014/02/14 职场文书
文化活动实施方案
2014/03/28 职场文书
地球一小时倡议书
2014/04/15 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
教师党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
研究生简历自我评
2015/03/11 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
Python开发五子棋小游戏
2022/05/02 Python
Redis基本数据类型String常用操作命令
2022/06/01 Redis