有些时候可以使用 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()}
点击可以看到事件数组,方便查看元素上绑定了什么样的事件。
相关推荐
但不能阻止事件的追加。 什么情况下要阻止事件的追加呢? 比如: 点击“结账”,这样的操作时,结账本身有自己的事件,但结账前要判断是否登录。 我们可能会这样写: Js代码 代码如下: if(isLogin){ //判断是否登录...
在讨论jQuery阻止同类型事件的小结之前,我们首先要了解什么是事件冒泡和事件追加。在Web开发中,事件冒泡指的是在一个元素上触发事件时,这个事件不仅仅会在该元素上触发,还会向上冒泡到更上层的父元素,直至...
如果要阻止事件继续向上冒泡,可以使用`event.cancelBubble = true;`(IE)或`event.stopPropagation();`(DOM)。这样做可以确保事件只在当前元素上处理,不会影响到父元素的事件处理。 总的来说,JavaScript事件...
这两个方法分别用于阻止事件的默认行为和阻止事件冒泡。通过这样的处理,成功地修正了事件触发的冲突。 为了解决这类事件处理中的问题,作者进一步开发了一个简单的事件执行检测函数`eventsMonitor`。这个函数可以...
在 jQuery 中,你可以阻止事件冒泡使用 `event.stopPropagation()`。 7. **事件委托:**对于动态添加的元素,直接绑定事件可能无效。这时,可以使用事件委托,通过将事件绑定到其父元素,然后在事件处理函数中检查...
每次键盘事件触发时,将捕获的数据追加到文件中,确保添加适当的日期和时间戳以便后续分析。 实现这些功能时,我们需要考虑线程安全问题,因为钩子函数可能在不同的线程上下文中被调用。此外,还应处理异常,以防止...
面向对象tab栏切换(先删除所有选项卡操作再设置选中的选项卡)、添加(先创建元素再追加元素到对应的父元素里面)、删除(阻止冒泡防止触发点击事件 根据索引号删除对应的选项及内容 当删除的不是选中状态的选项的...
11. **阻止事件冒泡和默认事件:** 阻止事件冒泡可以避免事件处理器被多个元素捕获,IE浏览器使用event.cancelBubble=true,而非IE浏览器使用event.stopPropagation()。阻止默认事件则是阻止元素的默认行为,例如...
否则,我们可以阻止该字符的输入。例如,可以使用`e.KeyChar`获取按键的ASCII值,然后判断是否符合我们的输入规则。 3. **自动追加** 如果用户需要输入特定格式的数据,如电话号码或身份证号,我们可以实现输入...
如果多个元素绑定了同一个事件处理器,那么这个事件处理器可能会被执行多次,这时通常需要使用`event.stopPropagation()`方法来阻止事件继续向上冒泡。 - **移除特定函数**:在使用`unbind()`函数时,若要移除特定...
86:事件冒泡 87:阻止冒泡 88:阻止默认行为 89:动画效果 90:slideDown 91:淡入淡出 92:幻灯片插件1 93:幻灯片插件2 94:幻灯片插件3 95:幻灯片插件4 96:时间轴插件 97:图表插件1 98:图表插件2 99:图表插件3 100:图表...
6. **事件阻止与触发**: `preventDefault()`阻止默认行为,`stopPropagation()`阻止事件冒泡,`trigger()`则能手动触发事件。 三、jQuery动画效果 7. **动画API**: 包括`fadeIn()`, `fadeOut()`, `slideToggle()`,...
- **事件冒泡与阻止**:jQuery允许控制事件冒泡,`event.stopPropagation()`可阻止事件向上冒泡,`event.preventDefault()`可阻止默认行为。 - **委托事件**:`delegate()`或`on()`的委托模式可以为未来动态添加的...
2. 事件冒泡与阻止:`event.stopPropagation()`可以阻止事件冒泡,`event.preventDefault()`可防止默认行为执行。 三、动画效果 1. 动画方法:`fadeIn()`, `fadeOut()`, `slideToggle()`等创建平滑的视觉效果,`...
这个事件通常用于阻止默认的行为,因为默认情况下,元素是不能接受拖放的。需要通过`event.preventDefault()`来阻止浏览器的默认处理。 5. **ondragleave**:当拖动的元素离开目标区域时触发。可以用来移除之前为...
- `button2_Click`事件:这个事件可能是用来禁用或解除添加文字的功能,将`Add`变量设为False,阻止进一步的文本追加。 4. ListBox控件操作: - 添加项到ListBox:可以使用`Items.Add()`方法向ListBox中添加单独...
2. **事件冒泡与阻止默认行为**: `event.stopPropagation()`阻止事件继续向上冒泡,`event.preventDefault()`阻止事件的默认行为,如链接的跳转。 **三、动画效果** 1. **基本动画**: `fadeIn()`, `fadeOut()`, `...
3.4.1 阻止事件冒泡 3.4.2 移除事件处理程序 3.5 模仿用户操作 3.6 小结 第4章 效果——为操作添加艺术性 4.1 修改内联CSS 4.2 基本的隐藏和显示 4.3 效果和速度 4.4 多重...
- **编辑指定单元格**: 在单元格开始编辑时,可以使用`dataGridView1_CellBeginEdit`事件进行预处理,而在编辑结束时,则可以通过`dataGridView1_CellEndEdit`事件捕获更改后的数据,这为实时验证和数据完整性检查...