js默认事件汇总
默认事件
就是浏览器通过HTML标签或DOM元素提供的一些功能性的默认行为。比如在a标签href属性上的跳转,右键呼出的菜单等等。我们可以通过js取消或更改这些默认事件。
取消默认事件
默认事件都是定义在DOM元素相应的事件类型上的,我们只需要知道产生默认事件的是哪个元素,这个事件是什么类型的,就可以阻止或修改它。实现方式就是注册相应的事件处理函数,在其中通过如下API阻止默认事件的发生。
event.preventDefault() : 阻止默认行为
(IE9以下)event.returnValue=false:返回值=false 阻止默认行为
a标签的跳转
存在形式:在a标签的点击事件中。
// 获取一个a标签 禁止他的跳转行为
document.getElementsByTagName("a")[0].onclick = function(e){
var event = e||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
event.returnValue = false;
}
}
右键呼出菜单事件
存在形式:document的contextmenu事件中。
// 取消之后右键就没有菜单了
document.oncontextmenu = function(e){
var event = e||window.event;
if(e.preventDefault){
e.preventDefault();
}else{
event.returnValue = false;
}
}
不得不提的表单
存在形式:from表单会赋予它包含的button标签或type为submit的input,提交(submit)事件。
submit事件:根据from元素的method属性值决定提数据的方式,通常是get/post,提交表单元素的值。
// 一个默认使用get方法提交数据的表单
<form class="user-info">
<input type="text" name="user-id" id="">
<input type="text" name="user-pwd" id="">
<input type="submit" name="btn" value="提交" id="">
</form>
// 组着user-info表单中的提交事件
document.getElementsByClassName("user-info")[0].onsubmit = function(e){
var event = e || window.event;
if(event.preventDefault){
event.preventDefault();
}else{
event.returnValue = false;
}
}
未完待续...
js默认事件汇总的更多相关文章
- JS的事件汇总
一.前言 事件的绑定触发有很多种方法,我们如何选择呢? 很多时候,我们会使用鼠标事件,但是鼠标事件只能在PC设备上使用,当我们需要对不同设备兼容时怎么办呢? 二.正文 1. 事件的几个概念: 事件流: ...
- js 默认事件取消
防止事件捕获和冒泡 :子类的事件会会发父类相同类型的事件, w3c 标准 window.event.stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件 ...
- js进阶 12 jquery事件汇总
js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...
- js /jquery停止事件冒泡和阻止浏览器默认事件
1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js之阻止事件冒泡(待修改)和阻止默认事件
阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...
- JS如果阻止事件冒泡和浏览器默认事件
原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...
- js默认行为(也称默认事件)
对应于智能社21课, 在浏览器的空白页面右击时会出现一个提示框,实际上这是用的document.oncontextmenu属性,如果用下面的代码就能够阻止这样的默认行为: <!DOCTYPE h ...
- vue.js阻止事件冒泡和默认事件
首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...
随机推荐
- 【遍历二叉树】11把二叉树转换成前序遍历的链表【Flatten Binary Tree to Linked List】
本质上是二叉树的root->right->left遍历. +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ ...
- FFmpeg 的sws_getContext函数 、sws_scale函数
FFmpeg里面的sws_scale库可以在一个函数里面同时实现:1.图像色彩空间转换:2.分辨率缩放:3.前后图像滤波处理. 其核心函数主要有三个: // 初始化sws_scalestruct Sw ...
- java枚举学习enum
java 1.5以后才出现enum的关键字 所有的enum类都继承自Enum类,所以enum类无法再继承其他的类,可以实现接口,枚举类出了不能被继承其余的与普通类的特性一致, 枚举类的构造函数只能自己 ...
- jqgrid--api,官网demo,编辑
api参考: http://blog.csdn.net/hurryjiang/article/details/7551477 官网demo: http://www.trirand.com/blog/j ...
- 理解Promise
一.Propmise基本用法 Promise用于发送一个异步完成的结果,是替代回调函数的另一种选择.可以把Promise理解为一种异步函数. 以下函数通过一个Promise来异步地返回一个结果 fun ...
- asp.net C#操作存储过程读取存储过程输出参数值
这段时间在做一个价格平台的项目时候,同事让我写一个存储过程.该存储过程是根据查询条件得出一组新数据,并且返回该组数据的总条数,此处的存储过程我用到了分页,其中主要知识点和难点是之前做项目的时候没有用到 ...
- HDOJ1151有向图最小路径覆盖
//有向图最小路径覆盖:从某一点出发沿着有向路径,不走回路,能将所有的结点遍历. #include<iostream> #include<cstdio> #include< ...
- CSS3 日常小结
1. pointer-events:none; 2. flex 今天看到一个牛X的CSS3属性 flex, 称为弹性盒子. 这中属性完全可以替代媒体查询啦 使用方法: 父元素使用属性display ...
- canvas线条笔帽及连接
1) 线条笔帽篇: 1 function draw (id) { 2 var canvas = document.getElementById(id); 3 context = canvas.getC ...
- UML核心元素--参与者
定义:参与者是在系统之外与系统交互的某人或某事物.参与者在建模过程中处于核心地位. 1.系统之外:系统之外的定义说明在参与者和系统之间存在明确的边界,参与者只能存在于边界之外,边界之内的所有人和事务都 ...