使用事件的preventDefault()方法改变默认行为
事件有属性，还有方法，还有事件。事件本身是个对象^_^
事件的preventDefault()方法改变默认行为，在事件发生前阻止，不让其发生。这样的应用场景有很多，常见表单验证，如必填字段不能为空。
示例1，阻止链接
<body>
<p>DOM使用preventDefault()方法，IE5~IE8使用returnValue</p>
<p><a href="http://www.baidu.com/">去百度</a></p>
<p><a href="http://www.baidu.com" id="gotobaidu">去百度，将被阻止</a></p> <script>
var gotobaidu=document.getElementById("gotobaidu"); gotobaidu.addEventListener('click',stop,false); function stop(e) {
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue=false;
}
}
</script>
</body>
示例2，阻止表单提交
<body>
<p>DOM使用preventDefault()方法，IE5~IE8使用returnValue</p> <form id="myform" action="http://www.baidu.com/" method="get">
用户名：<input type="text" id="username" name="username">
<button type="submit">提交</button>
</form> <script>
var myform = document.getElementById('myform'); myform.addEventListener('submit', stop, false); function stop(e) {
var username = document.getElementById('username');
// alert(username.value);
if (username.value === '') {
//要求输入内容
alert("请输入用户名");
// 阻止
if (e.preventDefault) {
e.preventDefault();
} else {
window.event.returnValue = false;
}
}
}
</script>
</body>
使用事件的preventDefault()方法改变默认行为的更多相关文章
- 事件的preventDefault方法
事件有一个preventDefault()方法,该方法可以用来取消事件的默认行为.许多事件都有默认执行的关联行为.例如,如果用户在文本字段中键入一个字符,则默认行为就是在文本字段中显示该字符.由于可以 ...
- preventDefault()方法
必须在dragend和dragover事件内调用“事件对象.preventDefault()”方法.因为在默认情况下,拖放的目标元素是不允许接受元素的,为了把元素拖放到其中,必须把默认处理给关掉.目前 ...
- preventDefault() 方法 取消掉与事件关联的默认动作
前几天写的 响应键盘的图片切换 中, 键盘总是让浏览器滚动,为了取消掉默认的事件,使用了 preventDefault() 方法 定义和用法 preventDefault() 方法取消事件的默认动作. ...
- 阻止默认事件event.preventDefault();
阻止浏览器默认事件.什么是默认事件,例如浏览器默认右键菜单.a标签默认连接跳转...,如何阻止呢? Firefox中,event必须作为参数传入. IE中,event是window对象的属性. ev ...
- js 停止事件冒泡 阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标右键就会弹出context menu. ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
- js 停止事件冒泡 阻止浏览器的默认行为（阻止a标签跳转 ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了 ...
- js 停止事件冒泡 阻止浏览器的默认行为（比如阻止超连接 # ）
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ...
- js 停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到“停止事件冒泡”和“阻止浏览器默认行为”. 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器if ( ...
随机推荐
- 面向对象【day08】：反射的最佳实践（三）
本节内容 1.伪造web框架的路由系统 2.反射函数 3.扩展导入模块 4.企业最佳实践 一.伪造web框架的路由系统 commons.py #!/usr/bin/env python # -*- c ...
- postgresql时间处理
时间取到截取 例:select date_trunc('second', "reportTime") from travel_message limit 10; 结果: 他人博客: ...
- CSS魔法（一） 盒子模型
序言 盒子模型(橘子橘子皮) 一个盒子,包括:外边距(margin).边框(border).内边距(padding)以及最中间的内容(content). margin.padding <styl ...
- .NET面试题系列（十五）yong
Redis为什么使用单进程单线程方式也这么快 Redis遍历所有key的两个命令 -- KEYS 和 SCAN 一致性Hash算法 利用一致性哈希水平拆分MySql单表 单例模式 锁 双重锁 单例模 ...
- linux4.10.8 内核移植（二）---初步裁剪、分区修改和文件系统
一.初步裁剪 在内核根目录下 执行: make menuconfig 1.1 system type裁剪 选择 SAMSUNG S3C24XX SoCs Support 进入其中,这里是配置我们的单板 ...
- 第16月第10天 poco target
1. void TCPServer::start() { poco_assert (_stopped); _stopped = false; _thread.start(*this); } void ...
- 运维数据库平台~inception审核规则详解
---恢复内容开始--- 一 简介:这次我们来介绍最核心的审核功能 二 讲解:简单来说 inception就是mysql的二次过滤,何谓二次过滤,我们知道,mysql本身都有自己的审核规则,为业界所通 ...
- 2017-2018-2 20155303 『网络对抗技术』Exp3：免杀原理与实践
2017-2018-2 20155303 『网络对抗技术』Exp3:免杀原理与实践 --------CONTENTS-------- 1. 免杀原理与实践说明 实验说明 基础问题回答 2. 使用msf ...
- JS结合a标签的使用
a标签可以当作按钮使用,也可以当作连接. <a href=javascript:test(5)>弹出5</a> 会直接调用JS函数(注意中间没引号) <a href ...
- error: Apache shutdown unexpectedly.
本地前端xmapp apache突然不能启动了, 报错 15:36:48 [Apache] Error: Apache shutdown unexpectedly.15:36:48 [Apache] ...