javascript 阻止事件冒泡 cancelBubble
javascript简单的阻止事件冒泡,可以使用事件的cancelBubble方法为true;
html部分
<button id="btn1">点击显示div</button>
<div id="showDiv">
显示了
</div>
js部分
window.onload = function(){
var btn1 = document.getElementById("btn1");
var showDiv = document.getElementById("showDiv");
btn1.onclick = function(ev){
var oEvent = ev || event;
showDiv.style.display = "block";
//阻止时间冒泡
oEvent.cancelBubble = true;
}
document.onclick = function(){
showDiv.style.display = "none";
}
}
javascript 阻止事件冒泡 cancelBubble的更多相关文章
- JavaScript 阻止事件冒泡的实现方法
JavaScript 阻止事件冒泡,无使用其它插件来辅助,原生JS代码,考虑到浏览器的兼容性问题,这里对IE/火狐.Operating以及Chrome都有针对性的判断,代码如下: function c ...
- javascript阻止事件冒泡的兼容写法及其相关示例
//阻止事件冒泡的兼容写法 function stopBubble(e){ //如果提供了事件对象,则是一个非IE浏览器 if(e && e.stopPropagation) //因此 ...
- JavaScript阻止事件冒泡(兼容IE、Chrome、FF)
这里仅仅是一个简单代码demo,因为时间问题并未做深入研究,因为今天做项目时要用到阻止事件冒泡的内容,找了好多才找到一个可以使用的,特记录之. <!DOCTYPE HTML> <ht ...
- javascript阻止事件冒泡和浏览器的默认行为
1.阻止事件冒泡,使成为捕获型事件触发机制. 1 function stopBubble(e) { 2 //如果提供了事件对象,则这是一个非IE浏览器 3 if ( e && e.st ...
- javascript 阻止事件冒泡
阻止冒泡 冒泡简单的举例来说,儿子知道了一个秘密消息,它告诉了爸爸,爸爸知道了又告诉了爷爷,一级级传递从而引起事件的混乱,而阻止冒泡就是不让儿子告诉爸爸,爸爸自然不会告诉爷爷了. 举个栗子: 父容器是 ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- JavaScript阻止事件冒泡
今天在自学敲代码的时候发现了一个问题,当时的例子如下: <!DOCTYPE html> <html lang="en"> <head> < ...
- javascript阻止事件冒泡的方法
有的时候我们需要实现这样的功能: 点击某个蒙版,该蒙版消失,但是如果点击蒙版上的某个元素,希望蒙版不消失,这就需要用到阻止事件的冒泡了 html: <div id="outer&quo ...
- 理解阻止浏览器默认事件和事件冒泡cancelBubble
一.阻止浏览器默认事件 1.先举个例子说什么是 浏览器的默认事件 : 比如有一个输入框,当我按下字母a,就会在输入框显示字母a.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
随机推荐
- Spoj-BLMIRINA Archery Training
Mirana is an archer with superpower. Every arrow she shoots will get stronger the further it travels ...
- Perl语言入门--2--变量与字符串
一.$ 简单变量:$ 以$开头+字母或下划线 区分大小写,变量长度不限,没有关键字,但不能和默认变量重复 1.整数的表示: 12 12e2 #1200 -12 #-12 1_200_ ...
- My97DatePicker 时间控件
<td> <input type="text" id="sendDate" name="sendDate" class=& ...
- android调用邮件应用发送email
直接贴代码: Intent intent = new Intent(android.content.Intent.ACTION_SEND); // 附件 File file = new File(En ...
- BZOJ——1649: [Usaco2006 Dec]Cow Roller Coaster
http://www.lydsy.com/JudgeOnline/problem.php?id=1649 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 7 ...
- ubuntu下U盘变为只读
原文地址:http://www.cnblogs.com/coding-way/p/4243331.html 首先执行命令: tail -f /var/log/syslog 然后插入有问题的U盘,tai ...
- python的__name__和dir()属性
1.__name__属性 一个模块被另一个程序第一次引入时,其主程序将运行.如果我们想在模块被引入时,模块中的某一程序块不执行,我们可以用__name__属性来使该程序块仅在该模块自身运行时执行.示例 ...
- Spring实战Day5
3.3自动装配bean的歧义性 产生歧义的原因 找到多个符合条件的组件,如下注入talent时会有两个满足条件的组件 解决方法 标示首选的bean,但是同时标示两个或多个同样会存在歧义 自动装配标示P ...
- Struts2 与SpringMVC之比较
1.Struts2是类级别的拦截, 一个类对应一个request上下文,SpringMVC是方法级别的拦截,一个方法对应一个request上下文,而方法同时又跟一个url对应,所以说从架构本身上Spr ...
- Java 利用DFA算法 屏蔽敏感词
原文:http://www.open-open.com/code/view/1435214601278 import java.io.BufferedReader; import java.io.Fi ...