javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法
function stopBubble(e){
//如果提供了事件对象,则是一个非IE浏览器
if(e && e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>js事件冒泡 </title>
<meta name="keywords" content=""/>
<meta name="description" content=""/> <style type="text/css">
*{margin:0;padding:0;}
body{font-size:16px;font-family:"微软雅黑";color:#666;
background:#fff;
}
#tab{width:100%;margin:60px auto;;}
#tab td{height:35px;line-height:35px;text-align:center;}
</style>
</head>
<body> <table id="tab" border="1">
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>111</td>
<td>222</td>
<td>333</td>
<td>444</td>
<td>555</td>
<td>
<a href="javascript:;" onclick="del(event);">删除</a>
<a href="javacsript:;" onclick="edit(event);">编辑</a>
</td>
</tr>
</table>
<script type="text/javascript">
//点击td给tr加上一个背景色,同时选中checkbox
var tdDoms = document.querySelector("table").getElementsByTagName("td");
for(var i=0;i<tdDoms.length;i++){
tdDoms[i].addEventListener("click",function(){
var mark = this.parentElement.querySelector("input").checked;
if(!mark){
this.parentElement.style.background = "red";
this.parentElement.querySelector("input").checked = true;
}else{
this.parentElement.removeAttribute("style");
this.parentElement.querySelector("input").checked = false;
}
});
} function del(e){
alert(9);
//e.stopPropagation();
stopBubble(e);
} function edit(e){
alert(8);
stopBubble(e);
}
//阻止事件冒泡的兼容写法
function stopBubble(e){
//如果提供了事件对象,则是一个非IE浏览器
if(e && e.stopPropagation)
//因此它支持W3C的stopPropagation()方法
e.stopPropagation();
else
//否则,我们需要使用IE的方式来取消事件冒泡
window.event.cancelBubble = true;
}
</script>
</body>
</html>
javascript阻止事件冒泡的兼容写法及其相关示例的更多相关文章
- JavaScript阻止事件冒泡(兼容IE、Chrome、FF)
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true: html部分 <button id="btn1">点击显示div< ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- javascript阻止事件冒泡的方法
有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
随机推荐
- banner无限轮播
activity_main.xml <?xml version="1.0" encoding="utf-8"?> <RelativeLayou ...
- Loadrunner中参数化实战(1)-Sequential+Each iteration
参数化数据30条: 脚本如下,演示登录,投资,退出操作是,打印手机号: 首先验证Vugen中迭代: Sequential+Each iteration 设置迭代4次Action 结果如下:
- PHP入门 - - 06-->HTML的表格标签
表格标签<table> <table>的属性: Align: left, center, right (表格的)位置 Border: ...
- hdu4289 最小割最大流 (拆点最大流)
最小割最大流定理:(参考刘汝佳p369)增广路算法结束时,令已标号结点(a[u]>0的结点)集合为S,其他结点集合为T=V-S,则(S,T)是图的s-t最小割. Problem Descript ...
- Codeforces Round #356 (Div. 2)-B
B. Bear and Finding Criminals 链接:http://codeforces.com/contest/680/problem/B There are n cities in B ...
- Swift3.0语言教程获取字符串长度
Swift3.0语言教程获取字符串长度 Swift3.0语言教程获取字符串长度,当在一个字符串中存在很多的字符时,如果想要计算字符串的长度时相当麻烦的一件事情,在NSString中可以使用length ...
- D7控件\dw_cd_VirtualTreeview_v4.5.2\Demos\Advanced---TVirtualStringTree用法
VST1: TVirtualStringTree; //按钮公用函数,根据不同 标签tag区分, Screen.Cursor := crHourGlass; //设置屏幕鼠标的形状为crhourGla ...
- Jenkins控制台中文输出乱码解决方法
1. 设置jenkins所在服务器环境变量,右键我的电脑→属性→高级系统设置→环境变量,添加JAVA_TOOL_OPTIONS 2.修改Tomcat配置,进入apache_tomcat/conf文件夹 ...
- WPF 颜色转换
从字符串到画刷: var converter = new System.Windows.Media.BrushConverter(); var brush = (Brush)converter.Con ...
- BZOJ4383 : [POI2015]Pustynia
设$a$到$b$的边权为$c$的有向边的含义为$b\geq a+c$,则可以根据题意构造出一张有向图. 设$f[x]$为$x$点可行的最小值,$a[x]$为$x$位置已知的值,则$f[x]=\max( ...