`

阻止事件追加

阅读更多

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

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

比如:

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

 

我们可能会这样写:

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,在控制台输入。

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

 

会看到如下: 

 

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

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

 

0
0
分享到:
评论

相关推荐

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

    但不能阻止事件的追加。 什么情况下要阻止事件的追加呢? 比如: 点击“结账”,这样的操作时,结账本身有自己的事件,但结账前要判断是否登录。 我们可能会这样写: Js代码 代码如下: if(isLogin){ //判断是否登录...

    jQuery阻止同类型事件小结

    事件追加:点击green元素会依次执行green click1、green click2两个事件(同一元素的同类型事件),感兴趣的朋友可以参考下哈

    面向对象tab转换、编辑.rar

    面向对象tab栏切换(先删除所有选项卡操作再设置选中的选项卡)、添加(先创建元素再追加元素到对应的父元素里面)、删除(阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 当删除的不是选中状态的选项的...

    【推荐】高清jquery视频教程下载

    86:事件冒泡 87:阻止冒泡 88:阻止默认行为 89:动画效果 90:slideDown 91:淡入淡出 92:幻灯片插件1 93:幻灯片插件2 94:幻灯片插件3 95:幻灯片插件4 96:时间轴插件 97:图表插件1 98:图表插件2 99:图表插件3 100:图表...

    jquery基础教程高清版PDF.part5.rar

     3.4.1 阻止事件冒泡   3.4.2 移除事件处理程序   3.5 模仿用户操作   3.6 小结  第4章 效果——为操作添加艺术性   4.1 修改内联CSS   4.2 基本的隐藏和显示   4.3 效果和速度   4.4 多重...

    apip:把力所能修改的wordpress插件合并到同一个插件里,减少重复引用,替换弃无用功能。大部分参考的源码都是开源协议,所以我也应该开源。反正我开了,至于你能不能找到这里,是你的事

    功能没有配置项的功能Ctrl + Enter提交屏蔽绝对的js屏蔽绝对的css feed最后追加版权页等追加的后台编辑快捷按钮调整尺寸的标签云数量和随机函数可移除后台编辑页面上的作者列升级后覆盖高危文件屏蔽wp_embedd功能...

    Google Search Blocklist-crx插件

    当每个搜索结果项的URL包含在阻止列表中...特定のURLやキーワードをブロックリストに追加することで、それらが検索結果のURLに含まれている場合、その検索結果を非表示にすることが出来ます。 支持语言:English,日本語

    超实用的jQuery代码段

    1.14 阻止文本行换行 1.15 实现iframe高度自适应 1.16 实现左右div自适应相同高度 1.17 获取鼠标在屏幕中的坐标 1.18 获取鼠标在窗口客户区中的坐标 1.19 获取鼠标在窗口页面中的坐标 1.20 设置Flash对象的WMode窗口...

    jQuery详细教程

    • 把所有事件处理函数置于文档就绪事件处理器中 • 把 jQuery 代码置于单独的 .js 文件中 • 如果存在名称冲突,则重命名 jQuery 库 jQuery 事件 下面是 jQuery 中事件方法的一些例子: Event 函数 绑定函数至 $...

    vash:规模达600亿美元的模板制造商Vash。 剃刀语法,用于JavaScript模板

    带有受Jade启发的布局引擎(阻止,包含,扩展,追加/添加),甚至可以在浏览器中使用。语法范例&lt;p&gt;How are you @model.name? Today is a sunny day on the planet Gunsmoke.&lt;/p&gt;&lt;ul class="@(m

    distraqt:间隔计时器

    错位 间隔计时器。 稍后再更新以提供更多详细信息。 功能:单击按钮以设置计时器完成后发出警报停止... 习惯于目标计时器功能:开始,结束,how叫,在选项卡中显示时间,会话表,追加中断/停止Evernote集成日历集成

    硬币开采阻滞剂「Coin Mining Blocker」-crx插件

    这个扩展有一个动态过滤列表,每24小时更新一次,以追加任何新的挖掘脚本。 您可以启用和禁用网络观察员禁止或允许执行挖掘脚本 JavaScript挖掘默认是禁用的。 扩展名显示工具栏徽章区域中当前页面被阻止的挖掘脚本...

    JTopCms站群内容管理系统 v3.0.rar

    系统能自动拦截并记录分析各种非法访问,及时通知站点管理员进行处理,对于恶意访问者,以黑名单制度自动进行阻止,为您的站点安全保驾护航。 6.高级搜索支持 支持类似百度的高级搜索功能,支持大数据下的快速搜索...

    JTopCms站群内容管理系统 v3.0 开源个人版.rar

    系统能自动拦截并记录分析各种非法访问,及时通知站点管理员进行处理,对于恶意访问者,以黑名单制度自动进行阻止,为您的站点安全保驾护航。 6.高级搜索支持 支持类似百度的高级搜索功能,支持大数据下的快速搜索...

    逐字地:轻量级SQL查询生成器

    子句是自动排列的,这意味着您可以根据需要重复使用,子查询和追加新子句–顺序无关紧要。 所有查询的格式都正确,可以直接传递给和 。 使用SQLiterally作为Knex.js之类的广泛查询构建器的轻量级替代方案,或者在...

    Coin Mining Blocker-crx插件

    此扩展名具有动态过滤列表,每24小时更新一次,以追加任何新的挖掘脚本。 您可以启用并禁用网络观察者以禁止或允许挖掘脚本正在执行。 默认情况下禁用JavaScript挖掘。 扩展显示在工具栏徽章区域中当前页面被阻止的...

    宏天影像采集系统演示 Ver3.16.123(2013-08)

    7、支持批量扫描、逐笔扫描、仅追加扫描、只读查询、影像随动等多种显示模式。 8、提供条码打印、文件另存、影像打印、历史版本查询、采集清单等辅助功能。 9、常用热键(更多热键见功能菜单): 上下左右、Home...

    数据库课程设计---投票系统

    为了有效的共享文件资源,保护好文件,及促进学生信息系统管理的信息化、规范化和集成化,本人多方听取意见、追加和完善大量实用功能,进而了解文件管理的流程,同时结合各部门、各专业与学科管理的方法,开发出一套...

    Serv-U FTP Server v7.0.0.2

    + 对于 "os.UNIX=slink",添加更多信息到 MLST / MSLD Type 结果,并且如果向用户提供 ":linked_path",则 Serv-U 还会追加该信息。 + 改进了 Windows 快捷方式解决方案,以同时包括使用相对路径和其他属性组合的...

Global site tag (gtag.js) - Google Analytics