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' ...
随机推荐
- jQuery中.bind() .live() .delegate() .on()的区别
bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert(& ...
- VS Copy Files after build
<Import Project="$(MSBuildToolsPath)\Microsoft.CSharp.targets" /> <ItemGroup> ...
- HA（High available）--Heartbeat高可用性集群（双机热备）菜鸟入门级
HA(High available)--Heartbeat高可用性集群(双机热备) 1.理解:两台服务器A和B ,当A提供服务,B闲置待命,当A服务宕机,会自动切换至B机器继续提供服务.当主机恢复 ...
- 【转】STM32定时器输出比较模式中的疑惑
OCx与OCxREF和CCxP之间的关系 初学STM32,我这个地方卡了很久,现在终于有些明白了,现在把我的理解写下与大家共享,如果有不对的地方,还请指出. OCxREF就是一个参考信号,并且约定: ...
- jQuery：获取浏览器中的分辨率
JQuery: <script type="text/javascript"> $(document).ready(function(){ alert($(window ...
- SQL：查找被锁的表，以及锁表的SQL语句（重点推荐）
--死锁检测 use master Select * --找到SPID exec sp_lock --根据SPID找到OBJID ) --根据OBJID找到表名 1.DatabaseName 同于你要 ...
- 测试工具之Charles视频教程（更新中。。。）
应群里小伙伴学习需求,录制新版 Charles V4 系列教程,后续内容抽空更新,测试工具系列带你上王者...(ノ°ο°)ノ前方高能预警 链接:http://pan.baidu.com/s/1c16P ...
- Provisional, Temporary 和Interim 的区别
1 Provisional adj. 临时的.暂时的.暂定的:n. 临时邮票 强调在一定时期内暂时的.双方同意的但还不是最终确定的决定或者条约等. Such as例如: Provisional go ...
- 不是技术牛人，如何拿到国内IT巨头的Offer（转载）
转载的文章,中间有几段需要去学习. byvoid 面阿里星计划的面试结果截图泄漏,引起无数IT屌丝的羡慕敬仰.看看这些牛人,NOI金牌,开源社区名人,三年级开始写Basic-在跪拜之余我们不禁要想,和 ...
- c#lock语句及在单例模式中应用
C#中的lock语句是怎么回事,有什么作用? C#中的lock语句将lock中的语句块视为临界区,让多线程访问临界区代码时,必须顺序访问.他的作用是在多线程环境下,确保临界区中的对象只被一个线程操作, ...