使用事件的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 ( ...
随机推荐
- 约束Constraints--主键约束、外键约束、唯一约束、检查约束、默认约束、NOT NULL约束、列约束与表约束、创建约束、删除约束
约束 Including Constraints 以下内容转自:https://www.cnblogs.com/wcl2017/p/7043939.html和http://blog.csdn.ne ...
- 简易ATM机
简易ATM机(代码如下): /* * 功能:简易银行系统 */package day8; import java.util.Scanner; /** * * @FengYan Huang Admini ...
- 解决win10无线无故断网,重启才恢复正常的情况【原】
最初以为是路由器问题 ,但是别人电脑都好好的呀,而且我自己的手机也是好好的能正常上网,所以只能从自身电脑找问题了,目测就是无线网卡出问题了.经过一番百度,原来是win10自动开启了省模式,运行一段时间 ...
- CentOS6.x下，tomcat - web项目部署
1. 安装tomcat tomcat安装方法:http://www.cnblogs.com/vurtne-lu/p/6478440.html 2. 配置tomcat 修改server.xml文件 &l ...
- ASP.NET MVC深入浅出（被替换）
一. 谈情怀-ASP.NET体系 从事.Net开发以来,最先接触的Web开发框架是Asp.Net WebForm,该框架高度封装,为了隐藏Http的无状态模式,ViewState功不可没,通过的控件的 ...
- DEV Winform分页用户组件
资源部分在QQ群:616945527基于服务端数据分页,你也可以修改成本地分页.调用方法添加用户控件到窗体 public int curPage = 1;public int pageSize = 1 ...
- xml的解析方式的简介
xml的解析的简介(写到java代码) *xml是一个标记型文档 *js使用dom解析标记型文档? -根据html的层级结构,在内存中分配一个树形结构,把html的标签,属性和文本都封装成对象 -do ...
- Oracle——存储过程的使用
为什么使用存储过程? 存储过程只在创造时进行编译,以后每次执行存储过程都不需再重新编译,而一般SQL语句每执行一次就编译一次,所以使用存储过程可提高数据库执行速度. 存储过程的定义: 存储过程(Sto ...
- NOIP2018 前流水账
不务正业系列 学习yyb,zsy,ljq,mona等大佬而写的 \(qwq\) 不知道前言写些什么 \(qwq\) 尽量日更好吧 \(qwq\) \(upd:\)日更是不可能日更的,这辈子不可能的 \ ...
- 第三周结对项目--小学生四则运算CAI软件汇报及总结（UI/web）
前言: 这周是和我队友苏卫喜一起结对开发,我主要是写项目文档需求分析,她是通过我的需求文档来进行做思维导图,之后我们通过思维导图一起讨论用户界面设计. 以下就是我的需求分析1.0版本 1. 软件名 ...