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是一个全局的变量 我们写代码的时候常用的都是事件冒泡,但是有的时候我们并不需要触发父元素的事件,而浏览器也有自己的默认行为(表单提交.超链接跳转 ...
随机推荐
- 算法笔记_157:算法提高 c++_ch02_01(Java)
目录 1 问题描述 2 解决方案 1 问题描述 编写一个程序,利用强制类型转换打印元音字母大小写10种形式的ASCII码. 输出的顺序为:大写的字母A,E,I,O,U的ASCII码,小写的字母a, ...
- Nginx.conf简介
vim /etc/nginx/nginx.conf #user nobody; worker_processes 1; #error_log logs/error.log; #error_log lo ...
- ant design pro (六)样式
一.概述 参看地址:https://pro.ant.design/docs/style-cn 基础的 CSS 知识或查阅属性,可以参考 MDN文档. 二.详细介绍 2.1.less Ant Desig ...
- 【UNIX网络编程】FIFO
管道作为进程间通信的最古老方式,它的缺点是没有名字,因此仅仅能用在有亲缘关系的父子进程之间.对于无亲缘关系的进程间.无法用管道进行通信.FIFO能够完毕无亲缘关系的进程间的通信.FIFO也被称为命名管 ...
- Oracle 角色、权限
Oracle 角色管理 一.何为角色 角色:角色是一组权限的集合,将角色赋给一个用户,这个用户就拥有了这个角色中的所有权限.二.系统预定义角色 预定义角色是在数据库安装后,系统自动创建的一些常 ...
- 转:简单通用的一则makefile .
在linux下面下写程序少不了写makefile,如果每个文件都按部就班的详细的写编译脚本,效率势必低下:makefile提供了自动化变量.模式规则等,稍加利用可以提高写makefile的效率.下面列 ...
- 【CI3.1】CI框架简单使用方法
CI框架简单使用方法 1.回忆MVC 1.1.M:模型,提供数据,保存数据 1.2.V:视图,只负责显示,表单form 1.3.C:控制器,协调模型和视图 1.4.action:动作,是控制器中的方法 ...
- kernel4.1 ioctl调用
在4.1内核中开发时遇到个奇怪的问题: 用户空间的ioctl无法调用到内核空间的unlock_ioctl 排查源码发现 546 int do_vfs_ioctl(struct file *filp, ...
- session过期后iframe页面如何跳转到parent页面
session过期后如果在iframe里操作就会返回到login.html,可是这个页面还在iframe里面如果再次登陆就会出现iframe嵌套的现象,我们这样来解决. 在login.html里面加上 ...
- 引用、数组引用与指针引用、内联函数inline、四种类型转换运算符
一.引用 (1).引用是给一个变量起别名 定义引用的一般格式:类型 &引用名 = 变量名: 例如:int a=1; int &b=a;// b是a的别名,因此a和b是同一个单元 ...