js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流
1. event.preventDefault(); -- 阻止元素的默认事件。
注:a元素的点击跳转的默认事件 ,
button,radio等表单元素的默认事件 ,
div 元素没有默认事件
例:
samp.addEventListener("click",function(e){e.preventDefault()},false);
解释:点击链接的时候正常情况下会发生跳转,但是现在我们阻止了它的默认事件,即跳转事件,这时就不会跳转到百度了。
2. event.stopPropagation(); -- 阻止元素冒泡事件
注:嵌套元素一般都存在冒泡事件,会带来某些影响
例:
<div id="c2" onlick="alert(2)">
<input type="button" id="c3" value="点击" onclick="alert(3)">
</div>
</div>
这里点击button的时候,浏览器会先后弹出3,2,1,本来只想让绑定在button上的事件发生,却无意中触发了它的两个父级上的事件,这里我们只是做了一个简单测试,试想如果在项目开发中,某个按钮和他的父级同时绑定了很重要的事件,那么结果会惨不忍睹。这时的处理方法就是阻止冒泡事件。
给input注册click事件,同时阻止它的冒泡事件
OK!!!了
js阻止浏览器、元素的默认事件与js阻止事件冒泡、阻止事件流的更多相关文章
- webdriver与JS操作浏览器元素
1.JQuery的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 c ...
- 纯JS阻止浏览器默认滚动事件,实现自定义滚动方法
首先该方法兼容IE7+以上浏览器,可以实现页面上下滚动,而且也可以实现页面左右滚动,每次滚动的距离为屏幕的大小,滚动为加速滚动 javaScript代码如下: //滚动实现方法,使用鼠标滚轮每次滚动浏 ...
- jq中如何阻止元素的默认行为?
阻止网页元素的默认行为: event.preventDefault(); 或者:return false;
- JS 获取浏览器和屏幕宽高等信息代码
JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth 网页可见区域高:document.body.clientHeight 网页可见区域宽:doc ...
- Elasticsearch.js 发布 —— 在Node.js和浏览器中调用Elasticsearch(1)
继PHP.Ruby.Python和Perl之后,Elasticsearch最近发布了Elasticsearch.js,Elasticsearch的JavaScript客户端库.可以在Node.js和浏 ...
- Elasticsearch.js 发布 —— 在Node.js和浏览器中调用Elasticsearch
继PHP.Ruby.Python和Perl之后,Elasticsearch最近发布了Elasticsearch.js,Elasticsearch的JavaScript客户端库.可以在Node.js和浏 ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- JS 阻止浏览器默认行为和冒泡事件
JS 冒泡事件 首先讲解一下js中preventDefault和stopPropagation两个方法的区别: preventDefault方法的起什么作用呢?我们知道比如<a href=& ...
- JQuery 阻止js事件冒泡 阻止浏览器默认操作
//阻止事件冒泡 event.stopPropagation(); //阻止浏览器默认操作 event.preventDefault(); 代码不一定能执行,写给自己看的. 事件冒泡: <a h ...
随机推荐
- freemark基础知识
前言:使用freemarker对应生成一个html文件,保存到磁盘,访问文件就不一定使用tomcat,可以使用nginx(http服务器)访问.可以使用freemaker工具生成.只生成一次,html ...
- 动画基础--基于Core Animation(2)
参考:https://zsisme.gitbooks.io/ios-/content/ 前面的文章动画基础--基于Core Animation(1)提到了图层的基本概念以及可动画参数几何学等知识. 本 ...
- Github精选 – 适合移动端的HTML5 Datepicker
2016-01-12 (updated: 2017-01-07) 15731 通过 HTML5 的 <input> 新属性可以简单方便地调用手机的原生 Datepicker,但功能较弱, ...
- Hierarchical Attention Based Semi-supervised Network Representation Learning
Hierarchical Attention Based Semi-supervised Network Representation Learning 1. 任务 给定:节点信息网络 目标:为每个节 ...
- jmap 查看 map 内存占用
cmd jps查看进程id jmap -dump:format=b,file=/tmp/dump.dat 进程id eclipse安装mat http://blog.csdn.net/bohu83 ...
- spring boot 使用thymeleaf模版 报错:org.thymeleaf.exceptions.TemplateInputException
错误: org.thymeleaf.exceptions.TemplateInputException: Error resolving template "Hello", tem ...
- python的str,unicode对象的encode和decode方法(转)
python的str,unicode对象的encode和decode方法(转) python的str,unicode对象的encode和decode方法 python中的str对象其实就是" ...
- 转型(java)(.net)
/** * 父类 */ class Animal { public void eat() { //输出 父类吃.... } } class Bird extends Animal { public v ...
- centos部署Django项目的前提工作
从安装python到django项目的部署上线.是相当详细了,中间也没有出现什么幺蛾子.很赞!!! https://blog.csdn.net/u011798443/article/details/8 ...
- CodeForces 733D Kostya the Sculptor
排序.把每一个长方体拆成$6$个做,然后排序做即可. #pragma comment(linker, "/STACK:1024000000,1024000000") #includ ...