js原生子级元素阻止父级元素冒泡事件
<html>
<head>
<style type="text/css">
#hide{
width:75%;height:80px;background:skyblue;display:block;
}
.hander{cursor:pointer;}
input{
margin:5 0 0 900;
}
</style>
<script>
//不用window.onload也可以
document.documentElement.onclick = function(){
document.getElementById('hide').style.display = 'none';
}
//阻止冒泡事件方法
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
//方法必须要放在window.onload下
window.onload = function(){
document.getElementById("hide").onclick = function(e){
stopPropagation(e);
}
document.getElementById('btn_show').onclick = function(e) {
document.getElementById('hide').style.display = 'block';
stopPropagation(e);
}
} </script>
</head>
<body>
<div id="hide" class="hander">click here nothing happen,you can click beside this area</div>
<input type="button" id="btn_show" value="show" class="hander"/>
</body>
</html>
js原生子级元素阻止父级元素冒泡事件的更多相关文章
- Jquery遍历之获取子级元素、同级元素和父级元素
Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...
- js input复选框选中父级同时子级也选中
js实现复选框选中父级元素子级元素也选中,没有子级元素选中父级也不选中的效果 HTML <tr> <td> <label> <input name=" ...
- html css样式子元素相对父级元素定位
废话不多说. 父级元素 样式设置: position:relative; 子元素样式: position: absolute; 这样就可以达到子元素相对父级元素定位了.
- WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象
原文:WPF利用VisualTreeHelper遍历寻找对象的子级对象或者父级对象 简介 本文将完整叙述我利用VisualTreeHelper实现题述功能的全部过程,想直接看函数实现的朋友可以跳到函数 ...
- 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理
今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...
- JS获取节点的兄弟，父级，子级元素
https://blog.csdn.net/duanshuyong/article/details/7562423 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作 ...
- jQuery使用（四）：DOM操作之查找兄弟元素和父级元素
查找兄弟元素 向下查找兄弟元素 next() nextAll() nextUntil() 向上查找兄弟元素 prev() prevAll() prevUntil() 查找所有兄弟元素 siblings ...
- jquery获取元素（父级的兄弟元素的子元素）
一.获取父级元素 使用jquery获取父级元素: parent() 例如:$(this).parent('ul'); 二.获取同级元素 使用jquery获取同级元素:siblings() 例如:$(t ...
- jq点击元素删除父级
首先要能找到父级:需要操作的dom结构如下: <tbody> <tr> <td>星期一早起</td> <td class="status ...
随机推荐
- linux下配置jdk+tomcat
安装软件包 下载jdk和tomacat安装包,我这里使用的是jdk-8u144-linux-x64.tar.gz和apache-tomcat-8.5.23.tar.gz. 分别解压这两个安装包,用命令 ...
- asio 中strand的作用
namespace { // strand提供串行执行, 能够保证线程安全, 同时被post或dispatch的方法, 不会被并发的执行. // io_service不能保证线程安全 boost::a ...
- R文件报错
res中drawable中的资源文件进行命名时只能用0-9或者a-z或者-,其他的东西不能使用,也禁止在重命名时开头使用大写字母
- Linux 执行定时任务 shell脚本
Linux上面执行定时任务,我们可以利用crontab -e直接编辑定时任务 另外我们还可以写好shell脚本,定时去执行shell脚本,这两个方法都可以起到定时执行的作用 下面我详细说一下入如何执行 ...
- JAVA基础--JAVA API常见对象(其他API)13
一.其他API 1.System类 system类中的方法和成员变量都是静态的, 不需要创建System对象就可以直接使用. /* * 演示System的使用 */ public class Syst ...
- Git 移除某些文件
一.前言 在使用 Git 版本控制中,有些文件是不需要加入到版本控制中的.如 日志( log ).编译的文件.这些随时都在变的文件,使用用一个代码库的用户.只要稍稍修改一点,或者启动一下,就会变.容易 ...
- 使用fastadmin的页面异常模板
1.效果图 2.修改tp异常页面的模板文件( /thinkphp/tpl/think_exception.tpl ),将文件中的内容全部替换成下面的内容然后保存即可(若发生报错,请注意语言包问题) & ...
- lightoj 1074【spfa判负环】
题意: 给你一幅图,dis(u->v)的权值就是(w[v]-w[u])*(w[v]-w[u])*(w[v]-w[u]),所以有可能是负的,给你n个询问,给出最短路,长度<3或者不可达输出& ...
- OPENGL4_变换
几种变换的几何意义说明 http://blog.csdn.net/onafioo/article/details/22094247 变换的执行顺序问题 正常顺序 1 视图(观察)变换 2 模型变换 3 ...
- 覆盖equals方法时请遵守通用约定
覆盖equals方法时请遵守通用约定 覆盖equals方法看起来很简单,但是有许多覆盖方式会导致错误,并且后果很严重.最容易避免这种类问题的方法就是不覆盖equals方法,在这种情况下,类的每个实 ...