默认事件

  就是浏览器通过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. 一文读懂所有的编码方式(UTF-8、GBK、Unicode、宽字节...)

    编码方式就分两类:ANSI编码.Unicode编码.这两类编码都兼容ASC码. ------------------------------------------------------------ ...

  2. codeforces 707A A. Brain's Photos(水题)

    题目链接: A. Brain's Photos 题意: 问是黑白还是彩色; 思路: 没有思路: AC代码: #include <iostream> #include <cstdio& ...

  3. inux命令学习笔记(5):rm 命令

    学习了创建文件和目录的命令mkdir ,今天学习一下linux中删除文件和目录的命令: rm命令. rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目 录及其下的所 ...

  4. linux命令学习笔记(38):cal 命令

    cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又称格列历,通称阳历. “阳历”又名“太阳历”,系以地球绕行太阳一周为一年,为西方各国所通用,故又名“西历”. .命令格式: cal ...

  5. freeMarker(三)——模板开发指南之数值、类型

    学习笔记,选自freeMarker中文文档,译自 Email: ddekany at users.sourceforge.net 模板开发指南——数值.类型 1.基本内容 1.1 什么是数值? 正如你 ...

  6. LOJ2302 「NOI2017」整数

    「NOI2017」整数 题目背景 在人类智慧的山巅,有着一台字长为$1048576$位(此数字与解题无关)的超级计算机,著名理论计算机科 学家P博士正用它进行各种研究.不幸的是,这天台风切断了电力系统 ...

  7. Tensorflow 数据导入

    导入数据 借助 tf.data API,您可以根据简单的可重用片段构建复杂的输入管道.例如,图片模型的管道可能会汇聚分布式文件系统中的文件中的数据.对每个图片应用随机扰动,并将随机选择的图片合并成用于 ...

  8. POJ3087(模拟)

    #include"iostream" #include"string" #include"map" using namespace std; ...

  9. nginx与apache 限制ip连接数和带宽方法

    今天有个人问我,nginx怎么限制ip连接数,突然想不起来了,年龄大了,脑子不怎么好使了.还要看一下配置才想起了.那个人又问我,你测试过的吗?一下子把我问蒙了,我真没测试过了,也不知道启作用了没有. ...

  10. 一 ThreadLocal

    (1)  Threadlocal定义: 当使用ThreadLocal维护变量时,ThreadLocal为每个使用该变量的线程提供独立的变量副本,所以每一个线程都可以独立地改变自己的副本,而不会影响其它 ...