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

 更新时间:2014年09月02日 15:26:51   投稿:whsnow   我要评论
当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的,解决方法就是加一句阻止冒泡即可

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

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被点击"); 
});

加一句阻止冒泡即可。

相关文章

  • jQuery回到顶部的代码

    jQuery回到顶部的代码

    在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果,非常不错,感兴趣的朋友可以参考下
    2016-07-07
  • 基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)

    jquery-slider幻灯片插件通过json数据来提供图片地址和描述信息,同时也可以更换json数据来动态切换不同的图片,对json数据jquery幻灯片插件相关知识感兴趣的朋友一起学习吧
    2016-08-08
  • jQuery遍历json的方法(推荐)

    jQuery遍历json的方法(推荐)

    这篇文章主要介绍了jQuery遍历json的方法的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06
  • jquery text()方法取标签中的文本

    jquery text()方法取标签中的文本

    本节主要介绍了jquery使用text()方法取标签中的文本的具体实现,需要的朋友可以参考下
    2014-07-07
  • jquery 必填项判断表单是否为空的方法

    jquery 必填项判断表单是否为空的方法

    jquery 表单验证,检测表单是否为空
    2008-09-09
  • 基于jQuery1.9版本如何判断浏览器版本类型

    基于jQuery1.9版本如何判断浏览器版本类型

    在jquery.1.9以前的版本,可以使用$.browser很轻松的判断浏览器的类型和版本,但是在1.9中和以后的版本中,$.browser已经被删除,下面就介绍一下如何实现此功能,希望能够给需要的朋友带来帮助
    2016-01-01
  • jQuery简单几行代码实现tab切换

    jQuery简单几行代码实现tab切换

    本文给大家介绍的是一款使用jQuery实现的简易选项卡的代码,通过控制css熟悉来实现tab切换,思路清晰,这里推荐给大家。
    2015-03-03
  • webpack写jquery插件的环境配置

    webpack写jquery插件的环境配置

    本篇文章给大家讲述了用webpack开发jquery插件需要的环境以及配置讲解,有需要的读者们参考下吧。
    2017-12-12
  • jQuery获取file控件中图片的宽高与大小

    jQuery获取file控件中图片的宽高与大小

    本文通过实例代码告诉大家如何利用jQuery获取file控件中图片的宽高与大小,在我们上传之前就可以检查上传图片的大小,高度,宽度是否适合我们的要求了,下面是关于判断图片的宽高大小的代码。
    2016-08-08
  • 使用jquery动态加载javascript以减少服务器压力

    使用jquery动态加载javascript以减少服务器压力

    如果您要创建一个web2.0的应用程序,那么你的网页会包括大量的JavaScript文件,这些可能会拖慢您的网页。因此,动态加载JavaScript代码到您的网页是一个好主意,即只有当实用他们的时候加载它们。这种策略可以帮助你减少你的网页的加载时间
    2012-10-10

最新评论