javascript -- 阻止默认事件 阻止事件冒泡
1. event.preventDefault(); -- 阻止元素的默认事件。
注:a元素的点击跳转的默认事件 ,
button,radio等表单元素的默认事件 ,
div 元素没有默认事件
例:
<a href="http://www.baidu.com" target="_black">百度</a>
var samp = document.getElementByTagName("a");
samp.addEventListener("click",function(e){e.preventDefault()},false);
解释:点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。
2. event.stopPropagation(); -- 阻止元素冒泡事件
注:嵌套元素一般都存在冒泡事件,会带来某些影响
例:
<div id="c1" onclick="alert(1)">
<div id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" onclick="alert(3)">
</div>
</div>
这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。
给input注册click事件,同时阻止它的冒泡事件
document.getElementById('c3').addEventListener('click',function(e){e.stopPropagation()},false);
javascript -- 阻止默认事件 阻止事件冒泡的更多相关文章
- vue 事件修饰符(阻止默认行为和事件冒泡)
1. 原生js中,阻止事件冒泡,获取点击对象, e.stopPropagation(); 2. vue阻止事件冒泡@click.stop="show" <body> & ...
- addevent兼容函数 && 阻止默认行为 && 阻止传播
function addEvent(a, b, c, d) { a.addEventListener ? a.addEventListener(b, c, d) : a.attachEvent(&qu ...
- js事件冒泡、阻止事件冒泡以及阻止默认行为
事件冒泡 当事件发生后,这个事件就要开始传播(从里到外或者从外向里).为什么要传播呢?因为事件源本身(可能)并没有处理事件的能力,即处理事件的函数(方法)并未绑定在该事件源上.例如我们点击一个按钮时, ...
- [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流
面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...
- js 事件详解 冒泡
起因:正常情况下我点击s2时是先弹出我是children,再弹出我是father,但是却出现了先弹出我是father,后弹出我是children的情况,这种情况是在和安卓app交互的h5页面中出现的, ...
- jQuery事件篇---事件对象
内容提纲: 1.事件对象 2.冒泡和默认行为 发文不易,转载请注明出处! JavaScript 在事件处理函数中默认传递了 event 对象,也就是事件对象.但由于浏览器的兼容性,开发者总是会做兼容方 ...
- javaScript事件机制深入学习(事件冒泡,事件捕获,事件绑定方式,移除事件方式,阻止浏览器默认行为,事件委托,模拟浏览器事件,自定义事件)
前言 JavaScript与HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口中发生的一些特定的交互瞬间.可以使用侦听器(或处理程序)来预订事件,以便事件发生时执行相应的代码.这种在传统软 ...
- JavaScript事件:事件处理模型(冒泡、捕获)、取消冒泡、阻止默认事件
(一)事件处理模型---事件冒泡.捕获 (1)事件冒泡 24 <body> 25 <div class="warpper"> 26 <div clas ...
- javascript 阻止事件冒泡和阻止默认事件对比
公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...
- Javascript和jquery事件--阻止事件冒泡和阻止默认事件
阻止冒泡和阻止默认事件—js和jq相同,jq的event是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
随机推荐
- 右键菜单 GenericMenu
http://www.cnblogs.com/zhaoqingqing/p/3799294.html 自定义窗口中使用右键菜单: // This example shows how to create ...
- OpenERP 源码变更后数据库升级
转自:http://vivianyw.blog.163.com/blog/static/13454742220142114422130/?latestBlog OpenERP代码升级后需要对数据进行升 ...
- DBMS_METADATA中使用SESSION_TRANSFORM过滤不想获取的DDL
我们一般使用dbms_metadata.get_ddl获取对象的ddl的时候,有时会获取一些其它额外的信息,比如当你想获取表的创建语句的时候,你会得到表的约束信息,这个信息可能是你不想要的,那么就能够 ...
- jquery 图片懒加载
jquery 图片懒加载 CreationTime--2018年7月1日14点45分 Author:Marydon 1.源码展示 (function(a){a.fn.lazyload=functi ...
- javascript 原生实现 jquery live/delegate
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
- C-常用构造哈希函数
1.定址法(比如0-100岁的人数统计, 可以按年龄作为散列地址, 1980年后每年出生人数的统计, 可以把"年限 - 1980"作为散列地址) 2.取余法 3.数字分析法(比如一 ...
- PHP-密码学算法及其应用-散列函数
转自http://www.smatrix.org/bbs/simple/index.php?t5591.html /////////////////////////////////////////// ...
- Tomcat中部署Java Web应用程序的方式
Tomcat中部署Java Web应用程序的几种方式: #PetWeb是工程名 1.在TOMCAT_HOME\conf\server.xml文件的HOST节点中加入 <Context docBa ...
- 搭建coreseek(sphinx+mmseg3)详细安装配置+php之sphinx扩展安装+php调用示例(转)
一个文档包含了安装.增量备份.扩展.api调用示例,省去了查找大量文章的时间. 搭建coreseek(sphinx+mmseg3)安装 [第一步] 先安装mmseg3 cd /var/install ...
- PHP安全细节(转)
一个常见的PHP安全细则 发布时间:2012-01-09 10:18:50 来源:51cto 评论:0 点击:9 次 [字号:大 中 小] PHP本身再老版本有一些问题,比如在 php4.3. ...