阻止JavaScript事件冒泡到父元素
前言
略
问题
有代码如下:
<div class='preview_image_container'><!--图片--><div onclick='details(this)'><img class='preview_image' src='xx.png' /><div class='preview_name' >xxx</div></div><!--删除按钮--><img class='preview_delete' src='/img/icon-delete.png' onclick='delete(this)'>
</div>
此时产生一个问题:当点击删除按钮时,同时触发details(this)
函数和delete(this)
函数。
要解决此问题需要使用 stopPropagation
。
解决办法
在delete(this)
函数中调用event.stopPropagation()
阻止事件冒泡到父元素(这样就阻止details(this)
函数的执行)。
修改delete
函数为:
function delete(e) {event.stopPropagation();/*需要执行的代码*/...
}
stopPropagation
event.stopPropagation() 方法阻止事件冒泡到父元素,阻止任何父事件处理程序被执行。
阻止JavaScript事件冒泡到父元素相关推荐
- javascript 事件冒泡 和 冒泡事件阻止
本文摘自网友的文章 http://www.cnblogs.com/wuhen/archive/2010/08/12/1798348.html http://www.cnblogs.com/jams74 ...
- JavaScript事件冒泡、事件捕获和阻止默认事件
谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 冒泡篇 先来看一段实例: js: var $input = document. ...
- JavaScript事件冒泡
2019独角兽企业重金招聘Python工程师标准>>> 事件的冒泡和捕获 事件的冒泡有什么好处 事件冒泡的优点和缺点 不是所有的事件都能冒泡 阻止事件冒泡 阻止jQuery事件冒泡 ...
- JavaScript事件冒泡简介及应用
JavaScript事件冒泡简介及应用 一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件 ...
- JavaScript事件冒泡和事件委托
JavaScript事件冒泡和事件委托 付建宇 - 2 条评论 接触JavaScript不久,学的东西也不是特别多.小雨就是习惯把平时学到的东西拿出来分享.一方面加强自己的印象,一方面可以让自己的经验 ...
- JavaScript事件冒泡应用实例
在一些传统的小型WEB应用开发过程中,JavaScript通常只是拿来做表单验证而以,所以你很少会遇到因为JavaScript事件冒泡而影响功能的实现情况,又或者事件冒泡对最终实现效果影响不大,可忽略 ...
- javascript 事件冒泡和事件代理
事件冒泡 简单的讲,当子元素的事件处理函数被触发(如onclick),该事件会从事件源(当前子元素)逐级向上层元素传递,触发祖先元素的 onclik 事件,一直到最外层 html 根元素. 这可能会带 ...
- jQuery中阻止hover事件冒泡
这里写自定义目录标题 jQuery中阻止hover事件冒泡 前言 冒泡示例 冒泡效果 阻止冒泡 阻止冒泡效果 总结 jQuery中阻止hover事件冒泡 文章目录 jQuery中阻止hover事件冒泡 ...
- html a 冒泡点击,子元素点击不能冒泡到父元素
问题描述 给li绑定了click事件,结果点击li里面的a,span标签不会冒泡到父元素li上,只有点击li的其余部分(padding)才会触发点击事件 相关代码 document.querySele ...
最新文章
- ubuntu14.04下出现libmysqlclient.so.20找不到问题
- 2.14 文件和目录权限chmod
- stata主成分分析_主成分分析在STATA中的实现
- php tea 算法 源码,PHP教程:TEA算法实现
- ThinkPHP 3.2 版本升级了哪些内容
- python嵌套列表操作方法_python中多层嵌套列表的拆分方法
- 使用WebDeployment Project改善VS2005发布网站问题 [系列导读]
- jsp购物车加mysql_网上购物车(jsp+servlet+mysql)
- STM32F103学习笔记(7)——ISP串口下载程序
- SEFS安全透明加密内核
- scp登录The authenticity of host 192.168.0.xxx can't be established. 的问题
- 做软件测试必须了解的7个常用术语
- 赵小楼《天道》《遥远的救世主》深度解析(137) 职业的责任担当,活的认真
- 我用java写了个壁纸软件
- HP-UX之MP管理
- Good Luck in CET-4 Everybody!(sg函数模板)
- 渐变色---背景图片
- 英特尔第十代处理器为什么不支持win7_为什么英特尔新推出,i7处理器不支持w7系统,只支持w10...
- 线性空间,度量空间,赋范空间,线性赋范空间,内积空间,巴拿赫空间以及希尔伯特空间、拓扑空间
- 微信小程序---家庭记账本开发(一)