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.就是浏览器本该发生的事情.小孩子一出生就会汲取母乳一样的道理,这些都是先 ...
随机推荐
- BZOJ 4161 Shlw loves matrixI ——特征多项式
矩阵乘法递推的新姿势. 叉姐论文里有讲到 利用特征多项式进行递推,然后可以做到k^2logn #include <cstdio> #include <cstring> #inc ...
- Codeforces Round Rockethon 2015
A. Game 题目大意:A有N1个球,B有N2个球,A每次可以扔1-K1个球,B每次可以扔1-K2个球,谁先不能操作谁熟 思路:.....显然每次扔一个球最优.... #include<ios ...
- leetcode 144 先序遍历和中序遍历差不多
这是只写了先序遍历的非递归代码 /** * Definition for a binary tree node. * struct TreeNode { * int val; * TreeNode * ...
- Linux(12):期中架构(4)--- 前端部分:HTTP & Nginx & LNMP架构
HTTP协议概念原理说明 1. 当用户访问一个网站时经历的过程 # ①. 利用DNS服务,将输入的域名解析为相应的IP地址 a 本地主机输入域名后,会查询本地缓存信息和本地hosts b 本地主机会向 ...
- ReSharper7.1.25.234 注册机
经常用vs做开发的人都知道,ReSharper是vistual studio必备插件之一.他的智能提示,智能感知,.net底层方法查看,测试等都非常方便,给程序员带来了巨大的效率. 但众所周知ReSh ...
- Android开发之(1)AnimationListener
1,就像Button控件有监听器一样,动画效果也有监听器,只需要实现AnimationListener就可以实现对动画效果的监听,只需要实现AnimationListener就可以实现对动画效果的监听 ...
- 解决三星 BIOS 模式没有 Fast Bios Mode选项 U盘动项问题
今天想分下盘,进入biso竟然没有网上说 Fast Bios Mode选项,最后自己误打误撞竟然设置成功了,太不可思议了官方这么说:开机按F2进入BIOS设置,找到Boot选项下Boot Device ...
- ubuntu下用webbench做网站压力测试
安装依赖 exuberant-ctags sudo apt-get install exuberant-ctags 下载源码并安装 wget http://blog.s135.com/soft/lin ...
- DispatcherServlet url-pattern中 /、/*、*.do中的区别与作用
DispatcherServlet url-pattern中 /./*.*.do中的区别与作用 "/'表示匹配所有请求(其中包含除.jsp和.jspx外的所有后缀). 如果不配置静态资源,它 ...
- pandaboard用wifi时打不开网页
不可以手动修改/etc/resolv.conf,因为重启会被自动清空(raspberry pi 可以) 修改 resolvconf服务的配置文件: /etc/resolvconf/resolv.con ...