当前位置:首 页 > 技术文章 > 转载 > 详细

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

字号字号

摘要: 当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的,解决方法就是加一句阻止冒泡即可 简单说下事件委托与阻止冒泡html:view sourceprint? 01 <ul class="clearf……

  当点击具体的li元素时,发现ul的事件也被触发了,这是我们不想看到的,解决方法就是加一句阻止冒泡即可

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

html:

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

js:

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

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

解决:

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

加一句阻止冒泡即可。

  • 添加[Admin-3]
  • 浏览[1800]
  • ▼评论[0]
这是留给你的位置,说出你的真知灼见吧![我要评论][我要收藏][我要举报]