使用事件的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 ( ...
随机推荐
- 用 Vue 开发一个简单的答题应用（一）
Vue 之类的 MVVM 框架,能帮助我们用更少的代码实现复杂的业务. 为了简单一点,开发计划分成三阶段: 一,数据写死,实现基本的答题效果.支持多种题型. 二,使用本地存储保存数据,支持题目录入的功 ...
- 第17月第26天 setImageForState变形
1. 关于UIButton,既可以采用setBackgroundImage 来设置底部图片,同时也可以采用 setImage方法: 两者还是有一定区别的: 首先setBackgroundImage, ...
- org.apache.phoenix.exception.PhoenixIOException: SYSTEM:CATALOG
Error: SYSTEM:CATALOG (state=08000,code=101)org.apache.phoenix.exception.PhoenixIOException: SYSTEM: ...
- adb环境变量配置
针对win10系统: 搜索“高级系统设置”,点击“环境变量”按钮: 找到“path”双击: 双击“path”,在弹出的环境变量列表中新建,填入adb的文件路径 检查配置是否成功,运行命令adb,出现如 ...
- c++动态库封装及调用（3、windows下动态库调用）
1.DLL的隐式调用 隐式链接采用静态加载的方式,比较简单,需要.h..lib..dll三件套.新建“控制台应用程序”或“空项目”.配置如下: 项目->属性->配置属性->VC++ ...
- Excel中快捷键Ctrl+End覆盖过多
Sub dd() MsgBox ActiveSheet.UsedRange.Address End Sub 更简单的方法:通过快捷键,选中空白行/列,然后删除行/列,保存,OK!
- vsftpd控制用户禁止访问上级目录 只能访问自己目录
涉及文件: vsftpd.conf chroot_list_file=/etc/vsftpd.chroot_list 如果设置为 chroot_local_user＝YES chroot_list_e ...
- dup,dup2函数【转】
转自:http://eriol.iteye.com/blog/1180624 转自:http://www.cnblogs.com/jht/archive/2006/04/04/366086.html ...
- ES系列一、CentOS7安装ES 6.3.1、集成IK分词器
Elasticsearch 6.3.1 地址: wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-6.3. ...
- 【转】深入浅出JMS（二）--ActiveMQ简单介绍以及安装
现实的企业中,对于消息通信的应用一直都非常的火热,而且在J2EE的企业应用中扮演着特殊的角色,所以对于它研究是非常有必要的. 这篇博文介绍一款开源的JMS具体实现——ActiveMQ.ActiveMQ ...