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 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jquery js 重置表单 reset()具体实现代码
Aug 05 Javascript
控制台报错object is not a function的解决方法
Aug 24 Javascript
JavaScript获取表单内所有元素值的方法
Apr 02 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
javascript如何创建对象
Aug 29 Javascript
简单谈谈axios中的get,post方法
Jun 25 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
详解如何制作并发布一个vue的组件的npm包
Nov 10 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
Async/Await替代Promise的6个理由
Jun 15 Javascript
微信小程序使用echarts获取数据并生成折线图
Oct 16 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
php xml留言板 xml存储数据的简单例子
2009/08/24 PHP
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
提高PHP编程效率的方法
2013/11/07 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
javascript eval(func())使用示例
2013/12/05 Javascript
JS实现模仿微博发布效果实例代码
2013/12/16 Javascript
jQuery 中DOM 操作详解
2015/01/13 Javascript
jquery ui sortable拖拽后保存位置
2017/04/27 jQuery
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
2018/11/19 Javascript
Vue-cli3.X使用px2 rem遇到的问题及解决方法
2019/08/08 Javascript
vue 解决异步数据更新问题
2019/10/29 Javascript
jQuery 选择器用法基础入门示例
2020/01/04 jQuery
python计算文本文件行数的方法
2015/07/06 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
django+js+ajax实现刷新页面的方法
2017/05/22 Python
老生常谈python函数参数的区别(必看篇)
2017/05/29 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
解决python3 pika之连接断开的问题
2018/12/18 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
基于HTML5+Webkit实现树叶飘落动画
2017/12/28 HTML / CSS
美国渔具店:FishUSA
2019/08/07 全球购物
Java的类可以定义为Protected或者Private得吗
2015/09/25 面试题
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
领导班子对照检查材料
2014/09/22 职场文书
2014年宣传部工作总结
2014/11/12 职场文书
2014年文秘工作总结
2014/11/25 职场文书
店铺转让协议书
2015/01/29 职场文书
试用期辞职信范文
2015/03/02 职场文书
盗窃案辩护词
2015/05/21 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
vue中三级导航的菜单权限控制
2021/03/31 Vue.js