默认事件

  就是浏览器通过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默认事件汇总的更多相关文章

  1. JS的事件汇总

    一.前言 事件的绑定触发有很多种方法,我们如何选择呢? 很多时候,我们会使用鼠标事件,但是鼠标事件只能在PC设备上使用,当我们需要对不同设备兼容时怎么办呢? 二.正文 1. 事件的几个概念: 事件流: ...

  2. js 默认事件取消

    防止事件捕获和冒泡   :子类的事件会会发父类相同类型的事件, w3c 标准 window.event.stopPropagation也是事件对象(Event)的一个方法,作用是阻止目标元素的冒泡事件 ...

  3. js进阶 12 jquery事件汇总

    js进阶 12 jquery事件汇总 一.常用事件 页面载入事件 ready() 文档就绪事件(当 HTML 文档就绪可用时) 鼠标事件 click() 触发.或将函数绑定到指定元素的 click 事 ...

  4. js /jquery停止事件冒泡和阻止浏览器默认事件

    1>js阻止冒泡事件 var el = window.document.getElementById("a"); el.onclick = function (e) { // ...

  5. js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 # )

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...

  6. js之阻止事件冒泡(待修改)和阻止默认事件

    阻止默认事件(event.stopPropagation()): <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional// ...

  7. JS如果阻止事件冒泡和浏览器默认事件

    原地址:http://missra.com/article/web-57.html 嵌套的标签元素,如果父元素和子元素都绑定了一些事件,那么在点击最内层子元素时可能会触发父级元素的事件,下面介绍一下J ...

  8. js默认行为(也称默认事件)

    对应于智能社21课, 在浏览器的空白页面右击时会出现一个提示框,实际上这是用的document.oncontextmenu属性,如果用下面的代码就能够阻止这样的默认行为: <!DOCTYPE h ...

  9. vue.js阻止事件冒泡和默认事件

    首先我们来看原生JS取消事件冒泡方法: e.stopPropagation(); //非IE浏览器window.event.cancelBubble = true; //IE浏览器 原生JS阻止默认事 ...

随机推荐

  1. node.js 安装及配置(hello world)及 node 的包管理器(npm)

    下载地址:Download | Node.js,无脑下一步安装即可: 安装时,会自动将 node 可执行文件路径添加进 Path 内,这样进入 cmd 命令行,以查看 node 的安装版本: > ...

  2. 利用stomp.js实现websocket功能,接收ActiveMQ消息队列

    一.ActiveMQ消息发送端 package lixj; import java.util.Date; import javax.jms.Connection; import javax.jms.C ...

  3. ACM学习历程—HDU5476 Explore Track of Point(平面几何)(2015上海网赛09题)

    Problem Description In Geometry, the problem of track is very interesting. Because in some cases, th ...

  4. java的HashMap的几个问题

    HashMap处理hash冲突的几种方法 一. 开放定址法 Hi=(H(key) + di) MOD m i=1,2,...k(k<=m-1)其中H(key)为哈希函数:m为哈希表表长:di为增 ...

  5. BZOJ4003:[JLOI2015]城池攻占

    浅谈左偏树:https://www.cnblogs.com/AKMer/p/10246635.html 题目传送门:https://lydsy.com/JudgeOnline/problem.php? ...

  6. bash批量处理

    [root@azure_dbm1_s1 scripts]# more slave_1062_stop.sh #/bin/bash slave_num=`mysql -e "show slav ...

  7. 机器学习:k-NN算法(也叫k近邻算法)

    一.kNN算法基础 # kNN:k-Nearest Neighboors # 多用于解决分裂问题 1)特点: 是机器学习中唯一一个不需要训练过程的算法,可以别认为是没有模型的算法,也可以认为训练数据集 ...

  8. 【转】 Pro Android学习笔记(六九):HTTP服务(3):HTTP POST MultiPart

    目录(?)[-] 建立测试环境 开发环境导入第三方JAR HTTP Post Multipart小例子 HTTP POST不仅可以通过键值对传递参数,还可以携带更为复杂的参数,例如文件.HTTP Po ...

  9. Spring之2:Spring Bean动态注册、删除

    IoC容器的初始化包括BeanDefinition的Resource定位.载入和注册这三个基本的过程. 一.Resource定位.BeanDefinition的资源定位有resourceLoader通 ...

  10. nginx gzip

    # 开启gzip gzip on;   # 启用gzip压缩的最小文件,小于设置值的文件将不会压缩 gzip_min_length 1k;   # gzip 压缩级别,1-10,数字越大压缩的越好,也 ...