欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-06-07 21:21:02
...
有些时候可以使用 e.stopPropagation(); e.preventDefault();来阻止事件冒泡,和默认事件的执行。但不能阻止事件的追加。

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

比如:

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

我们可能会这样写:

Js代码

复制代码 代码如下:

if(isLogin){ //判断是否登录
console.log("没有登录")
}else{
//结账相关代码
}

如果点击“我的主页”也有登录判断
登录判断代码

if(isLogin){ //判断是否登录
console.log("没有登录")
}else{
//个人中心
}


如果还有更多的登录判断。是不是就会有更多像上面的代码呢?后来我发现stopImmediatePropagation()这个方法, 阻止事件追加。上面的问题就不是问题了。

重要:.确保登录判断事件是第一个绑定的事件。

Demo代码

复制代码 代码如下:





demo




结账



  • 加入收藏夹

  • 他人支付

  • 加入购入车

  • 我的主页







其实,jquery给我们提供了查看事件的方法$._data($('.isLogin').get(0)),打开firebug,在控制台输入。
Js代码

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

会看到如下:

Js代码

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

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

相关标签: 事件追加