事件委托与阻止冒泡阻止其父元素事件触发

简单说下事件委托与阻止冒泡

html:

<ul class="clearfix" data-type="cityPick">
<li class="active_sort_opts" data-id="0">全部</li>
<li data-id="88">纽约</li>
<li data-id="119">洛杉矶</li>
<li data-id="138">拉斯维加斯</li>
<li data-id="84">夏威夷</li>
<li data-id="120">旧金山</li>
<li data-id="105">奥兰多</li>
<li data-id="118">西雅图</li>
</ul>

js:

$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被点击");
});
$("ul[data-type='cityPick']").on('click','li',function(){
alert("子元素li被点击");
});

当点击具体的li元素时，发现ul的事件也被触发了，这是我们不想看到的。

解决：

$("ul[data-type='cityPick']").on('click',function(){
alert("父元素ul被点击");
});
$("ul[data-type='cityPick']").on('click','li',function(e){
e.stopPropagation();//阻止冒泡
alert("子元素li被点击");
});

加一句阻止冒泡即可。

赞 (0)

相关推荐

  • JavaScript事件委托的技术原理探讨示例

    如今的JavaScript技术界里最火热的一项技术应该是'事件委托(event delegation)'了.使用事件委托技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器是被添加到它们的父元素上.事件监听器会分析从子元素冒泡上来的事件,找到是哪个子元素的事件.基本概念非常简单,但仍有很多人不理解事件委托的工作原理.这里我将要解释事件委托是如何工作的,并提供几个纯JavaScript的基本事件委托的例子. 假定我们有一个UL元素,它有几个子元素: 复制代码 代码如下: <ul id=&qu

  • JavaScript事件委托用法分析

    本文实例讲述了JavaScript事件委托用法.分享给大家供大家参考.具体分析如下: 一.点击页面任何部分触发事件 创建一个script1.js文件. 复制代码 代码如下: (function() {     eventUtility.addEvent(document, "click", function(evt) {         alert('hello');     }); }()); 页面部分. 复制代码 代码如下: <head> <meta http-e

  • jQuery代码优化 事件委托篇

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托 事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台MM代为签收.现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递).前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款.这种方案还有一

  • JavaScript事件委托技术实例分析

    本文实例分析了JavaScript事件委托技术.分享给大家供大家参考.具体分析如下: 如果一个整体页面里有大量的按钮.我们就要为每一个按钮绑定事件处理程序.这样就会影响性能了. 首先每个函数都是对象,对象就会占用很多内存.内存中的对象越多,性能就越差. 其次,dom访问次数增多,就会导致延迟加载页面.事实上,从如何来利用好事件处理程序,还是有很好的解决方案的. 事件委托: 对事件处理程序过多的问题解决的方案就是事件委托技术. 事件委托技术利用了事件冒泡.只需指定一个事件处理程序. 我们可以为某个

  • javascript事件委托的方式绑定详解

    javascript事件委托的方式绑定详解

    js事件绑定 事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能.还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的. 之前一直使用的是jquery的on方法做这样的事情,前几天看到公司项目中有实现这种方式的源代码,拿来仔细研究研究,跟大家分享分享. function $bindAction(dom, event, listeners) { #

  • jQuery的事件委托实例分析

    事件委托主要是利用事件冒泡现象来实现的,对于事件委托的精准的掌握,可以有利于提高代码的执行效率.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>我们</title> <style type="text/css"> table{ width:300px; height:60px; backgro

  • 事件委托与阻止冒泡阻止其父元素事件触发

    简单说下事件委托与阻止冒泡 html: <ul class="clearfix" data-type="cityPick"> <li class="active_sort_opts" data-id="0">全部</li> <li data-id="88">纽约</li> <li data-id="119">洛杉矶&

  • jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

    首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑).拿click事件做例子,先附上一段代码: html: <body> <div id="box"> <p id="btn">我是按钮</p> </div> </body> style: .hid{ display:none; } script: $('#box').click(functio

  • JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“

    说下闭包的由来 function a() { var i = 0; function b() { console.log(i); } return b; } var c = a(); c(); 一般来说,当一个函数内部匿名函数用到了自己的变量,并且这个匿名函数被返回了,这就建立了一个闭包,比如上面的代码 这个时候,就算a调用结束被销毁,i也会存在不会消失当a定义时,js解释器会将函数a的作用域链设置为定义a时所在环境当执行a时,a会进入相应的执行环境,执行环境创建后才会有作用域scope属性,然

  • 浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流

    一.事件冒泡定义 事件冒泡是指在一个对象触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,甚至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层级的最顶层,即document对象(有些浏览器是window).. 二.事件冒泡的作用 事件冒泡允许多个操作被集中处理(把事件处理器添加到一个父级元素上,避免把事件处理器添加到多个子级元

  • 基于事件冒泡、事件捕获和事件委托详解

    基于事件冒泡、事件捕获和事件委托详解

    事件冒泡.事件捕获和事件委托 在javascript里,事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制,我先来解释一下事件冒泡和事件捕获: 事件冒泡会从当前触发的事件目标一级一级往上传递,依次触发,直到document为止. 事件捕获会从document开始触发,一级一级往下传递,依次触发,直到真正事件目标为止. 这么说是不是很抽象,其实就像我敲击了一下键盘,我在敲击键盘的同时,我是不是也敲击了这台电脑,我写个例子大家就明白了: <!DOCTYPE html> <ht

  • jQuery阻止冒泡和HTML默认操作

    1:jQuery是一个快捷简便的JavaScript框架,说道框架可以直接理解为就是对原来底层的东西进行了封装使得开发者能够利用这个框架快速开发. 2:在当今的各个浏览器中都支持事件的冒泡,所谓的冒泡可以这样理解: 条件:外层有一个DIV元素,在内层有一个P元素,他两存在这样的关系:DIV是P元素的父元素,而P是外层DIV的子元素,他们之间存在包含和被包含的关系.       事件:现在我们都在这两个元素上绑定相同的事件,比如click事件.       结果:这时,当我们点击内层的P标签的时候

  • JavaScript事件委托原理

    JavaScript事件委托原理

    目录 一.什么是事件委托 二.事件委托的原理 三.事件委托的作用 一.什么是事件委托 事件委托也称为事件代理.就是利用事件冒泡,把子元素的事件都绑定到父元素上.如果子元素阻止了事件冒泡,那么委托就无法实现. 举个简单的例子: 例如快递员有100个快递要分别送给100个学生, 如果一个个的送花费时间较长.同时每个学生领取的时候,也需要排队领取,也花费时间较长,应该怎样操作呢?这时快递员可以把100个快递委托给班主任,班主任把这些快递放到办公室,同学们下课自行领取即可.这样的话,快递员省事,同学们领

  • js事件流、事件委托与事件阶段实例详解

    js事件流、事件委托与事件阶段实例详解

    目录 前言 1.事件流 2.事件处理程序 3.事件对象 4.跨浏览器事件处理 5.事件委托 总结 前言 JavaScript 与 HTML 的交互是通过事件实现的,事件代表文档或浏览器窗口中某个有意义的时刻.可以使用仅在事件发生时执行的监听器(也叫处理程序)订阅事件.本文总结一下 JS 中的事件相关知识点. 1.事件流 HTML 中与 javascript 交互是通过事件驱动来实现的,例如鼠标点击事件 onclick.页面的滚动事件 onscroll 等等,可以向文档或者文档中的元素添加事件侦听

  • JavaScript之事件委托实例(附原生js和jQuery代码)

    事件委托的原理依赖于事件冒泡,可以通过给父元素的事件委托来确定是哪个子元素触发了事件从而做一系列操作. 使用事件委托的优点 1.操作子元素时不用一一遍历,可以根据事件触发的对象而进行相应操作 dom结构如下: <ul id = "oUl"> <li class = "item"></li> <li class = "item"></li> <li class = "ite

随机推荐