javascript 的事件--阻止冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试</title>
</head>
<body>
<input type="button" id="btn1" value="点击">
<div id="div1" style="width: 200px; height: 200px; display: none;"></div>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1');
oBtn.onclick=function(eve){
var oEvent=eve||event; //处理ie和火狐的兼容性问题
oDiv.style.display='block';
alert('按钮点击了');
oEvent.cancelBubble=true; //阻止冒泡
}
document.onclick=function(){
alert('冒泡');
}
}
</script>
</body>
</html>
javascript 的事件--阻止冒泡的更多相关文章
- 重新认识vue之事件阻止冒泡
冒泡的表现 近期用vue做了一个需求,大概是同一个区域,点击不同位置有不同的响应函数,还有个总的响应函数,好吧,如下图所示: 他们的DOM结构如下: <div v-for="(item ...
- JS事件阻止冒泡的写法
$("body").on("click", "#id", function (ev) { ev = ev || event;要写的逻辑代码 ...
- html如何点击子元素事件而不触发父元素的点击事件——阻止冒泡
如果子元素和父元素都有点击事件,会出现点击事件冒泡的情况. 1.如何避免冒泡: html: <html> <head></head> <body> &l ...
- angular 点击事件阻止冒泡及默认行为
经常遇到场景:多层级元素绑定ng-click 事件,则底层元素的点击事件存在冒泡现象,怎么解决? 类似原生JS ,只是语法稍有不同,如下: 阻止冒泡 $event.stopPropagation() ...
- vue.js 自带阻止默认事件 阻止冒泡
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 ...
- vue 点击事件阻止冒泡 用stop
1.使用vue阻止子级元素的click事件冒泡,很简单,用stop.eg: @click.stop='xxx'
- js 事件阻止冒泡
参考 https://www.cnblogs.com/zhuzhenwei918/p/6139880.html event.stopPropagation();
- 点击其它地方隐藏div／事件冒泡／sweet－alert阻止冒泡
点击document时把div隐藏,但点击div时阻止点击事件冒泡到document,从而实现“点击文档其它地方隐藏div,点击div本身不隐藏”.js代码如下:$("#div") ...
- label 阻止冒泡 防止点击label 触发2次事件
// 必须要把 jnput的外面的label加上事件阻止冒泡,否则点击label的时候,会冒泡到input上 再次触发input的点击事件 $('.xt_order_cleft_modb_rl_dx' ...
随机推荐
- 【转】C++怎么读写windows剪贴板的内容?比如说自动把一个字符串复制.
// 复制数据至剪切板BOOL CopyToClipboard(const char* pszData, const int nDataLen){ if(::OpenClipboard(NULL)) ...
- 每日学习心得：$.extend()方法和(function($){...})(jQuery)详解
2014-02-09 前言: 节后头两天上班,主要是调整工作状态.项目也不是很紧,趁着周末把年前遇到了一些关于JS和JQuery的一些问题给总结一下.主要是介绍JQuery的extend方法和(fun ...
- Windows xp IIS显示403错误解决方案
XP的IIS很烦人,很多限制. 最近一客户用XP安装IIS,总提示:403.9 错误 连接的用户过多 解决方案: 1)安装IIS配置工具 下载地址:http://download.microsoft. ...
- lumen 错误&日志
1.简介 开始一个新的Lumen项目的时候,错误和异常处理已经默认为你配置好了.此外,Lumen还集成了提供各种功能强大日志处理器的Monolog日志库. 2.配置 2.1 错误详情 配置文件.env ...
- RESTful API的重磅好伙伴Swagger2
本文将介绍RESTful API的重磅好伙伴Swagger2,它可以轻松的整合到Spring Boot中,并与Spring MVC程序配合组织出强大RESTful API文档. 它既可以减少我们创建文 ...
- HAProxy安装配置详解
简介 HAProxy提供高可用性.负载均衡以及基于TCP和HTTP应用的代理,支持虚拟主机,它是免费.快速并且可靠的一种解决方案. HAProxy特别适用于那些负载特大的web站点,这些站点通常又需要 ...
- Apache-Maven学习（转）
之前听同学说过关于他们公司使用Maven框架来做项目管理,后来也跟他一起参与过一个小的项目,但没有仔细的去搞,现在好好学习一下. 文章转载自:易百教程 [http:/www.yiibai.com] A ...
- WebApi：自定义筛选器
最近在项目中有这样一个需求,记录每次Api访问的调用时间,运行时间,传入数据,返回数据等信息. 第一反应就是添加一个类,用来实现相应的功能,然后在方法的代码中添加,但是这样的话,需要修改所有的方法的代 ...
- Storm Bolt接口
Bolt是Topology中数据处理的基本单元,也是Storm针对处理过程的编程单元.Topology中所有的处理都是在这些bolt中完成的. Bolt可以将数据项发送至多个数据流(Str ...
- OAF_JDBC系列1 - 数据库交互取值方式（案例）
2014-06-15 Created By BaoXinjian