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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
JS 页面自动加载函数(兼容多浏览器)
May 18 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
谷歌浏览器调试JavaScript小技巧
Dec 29 Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 Javascript
学习javascript面向对象 理解javascript原型和原型链
Jan 04 Javascript
原生js图片轮播效果实现代码
Oct 19 Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
js中的reduce()函数讲解
Jan 18 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 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 mssql扩展SQL查询中文字段名解决方法
2012/10/15 PHP
php使用百度翻译api示例分享
2014/01/31 PHP
PHP程序漏洞产生的原因分析与防范方法说明
2014/03/06 PHP
JavaScript与HTML结合的基本使用方法整理
2015/10/12 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
JavaScript 异步调用框架 (Part 5 - 链式实现)
2009/08/04 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
让你的CSS像Jquery一样做筛选的实现方法
2011/07/10 Javascript
JQuery给元素添加/删除节点比如select
2013/04/02 Javascript
javascript异步编程的4种方法
2014/02/19 Javascript
关于JavaScript中name的意义冲突示例介绍
2014/05/29 Javascript
修复bash漏洞的shell脚本分享
2014/12/31 Javascript
深入理解Javascript中的自执行匿名函数
2016/06/03 Javascript
Ionic 2 实现列表滑动删除按钮的方法
2017/01/22 Javascript
bootstrap daterangepicker双日历时间段选择控件详解
2017/06/15 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
2017/07/05 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
iconfont的三种使用方式详解
2018/08/05 Javascript
node.js使用net模块创建服务器和客户端示例【基于TCP协议】
2020/02/14 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
python实现八大排序算法(2)
2017/09/14 Python
python实现媒体播放器功能
2018/02/11 Python
Tensorflow 实现修改张量特定元素的值方法
2018/07/30 Python
python 二维数组90度旋转的方法
2019/01/28 Python
django连接mysql数据库及建表操作实例详解
2019/12/10 Python
Python celery原理及运行流程解析
2020/06/13 Python
德国综合购物网站:OTTO
2018/11/13 全球购物
全球采购的街头服饰和帽子:Urban Excess
2020/10/28 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
校本教研工作制度
2014/01/22 职场文书
公司担保书范文
2014/05/21 职场文书
导游词之江苏同里古镇
2019/11/18 职场文书
新手必备Python开发环境搭建教程
2021/05/28 Python
MySQL8.0升级的踩坑历险记
2021/11/01 MySQL