关于jquery stopPropagation()阻止冒泡事件
我们经常会遇到点击两个或者多个重叠的层事件的时候，往往点击最里的的一层会接连触发外面的点击事件。这时候就需要用到stopPropagation事件即阻止冒泡事件
html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$('input').bind('click',function(e){
e.stopPropagation()
alert('input')
})
$('div').bind('click',function(e){
e.stopPropagation();
alert('div')
})
$(document).bind('click',function(){
alert('document')
})
})
</script>
</head>
<body>
<div style="width:200px;height:200px;background:green;">
<input type="button" value="按钮">
</div>
</body>
<html>
关于jquery stopPropagation()阻止冒泡事件的更多相关文章
- JQuery阻止冒泡事件on绑定中异常情况分析
科普下事件冒泡以及默认行为,以下面例子举列子: 事件冒泡:当点击内部button元素时,会触发自身及外层 a的点击事件,这就是事件冒泡引起的.事件会随着 DOM 的层次结构依次向上传播. 事件 ...
- jquery 阻止冒泡事件和阻止默认事件
jQuery 冒泡和默认事件: <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- 点击tr实现选择checkbox功能，点击checkobx的时候阻止冒泡事件， jquery给checkbox添加checked属性或去掉checked属性不能使checkobx改变状态
给tr添加点击事件,使用find方法查找tr下的所有层级的元素,children只查找下一层级的元素,所以使用find.find的返回值为jquery对象,在这个项目中不知道为什么使用jquery给c ...
- jquery阻止冒泡事件行为发生
<div onclick="a()"> <p onclick="b()"></p> </div> div和p元素 ...
- DOM2级事件对象、添加事件、阻止默认事件、阻止冒泡事件、获取事件对象目标的兼容处理
事件对象——兼容处理 /* * 功能: 事件对象兼容 * 参数: 表示常规浏览器的事件对象e */ function getEvent(e) { // 如果存在e存在,直接返回,否则返回window. ...
- JavaScript 兼容各大浏览器阻止冒泡事件
JavaScript 兼容各大浏览器阻止冒泡事件 function stopEvent(event) { //阻止冒泡事件 //取消事件冒泡 var e = arguments.callee.call ...
- js 阻止冒泡事件和默认事件
阻止事件冒泡 window.enent ? window.enent.cancelBubble = true : e.stopPropagation() function stopBubble(eve ...
- js常用阻止冒泡事件
原文链接:http://caibaojian.com/javascript-stoppropagation-preventdefault.html 防止冒泡 w3c的方法是e.stopPropagat ...
- 页面内部DIV让点击外部DIV 事件不发生（阻止冒泡事件）
如标题的情况,经常发生,尤其是在一些弹出框上面之类的. <script> function zuzhimaopao(){ e.stopPropagation(); } </scrip ...
随机推荐
- iOS开发 - CoreData框架 数据持久化
Core Data Core Data是iOS5之后才出现的一个框架,它提供了对象-关系映射(ORM)的功能,即能够将OC对象转化成数据,保存在SQLite数据库文件中,也能够将保存在数据库中的数据还 ...
- turn协议的工作原理
Allocate请求 客户端通过发送Allocate请求给STUN服务器,从而让STUN服务器为A用户开启一个relay端口. a) 客户端A向STUN Port发送Allocate请求(图中 ...
- npm run dev报错--Error: Cannot find module 'yargs-parser'
Error: Cannot find module 'yargs-parser' ---报错不知何解??? 百度了很久没找到方法,是缺少“ yargs-parser ”模块,需要安装一下即可:cnp ...
- Java常用的排序查找算法
public static void main(String[] args) { // bubbleSort(); // int[] a = {20,2,10,8,12,17,4,25,11 ...
- oracle 时间格式转化以及计算
--A表中的日期字段 create_date 例如:2017-08-05 转化为2017年8月5日 oracle 在这里的双引号会忽略 select to_char(to_date(tt.c ...
- Node.js——基本服务开启
标注模式 var http = require('http'); var server = http.createServer(); server.on('request', function (re ...
- vuex使用之state访问状态对象
引入vuex1.利用npm包管理工具,进行安装 vuex.在控制命令行中输入下边的命令就可以了. npm install vuex --save 需要注意的是这里一定要加上 –save,因为你这个包我 ...
- 仿陌陌的ios客户端+服务端源码
软件功能:模仿陌陌客户端,功能很相似,注册.登陆.上传照片.浏览照片.浏览查找附近会员.关注.取消关注.聊天.语音和文字聊天,还有拼车和搭车的功能,支持微博分享和查找好友. 后台是php+mysql, ...
- php常用的一些代码
1.获取用户真实ip function getIP() { if (getenv("HTTP_X_FORWARDED_FOR")) { // 这个提到最前面,作为优先级,nginx ...
- JAVA 学习笔记 - 反射机制
1. JAVA反射机制的概念 2. 怎样实例化一个 Class对象 Class.forName(包名.类名); 对象.getClass(); 类.class; ================== ...