默认行为及阻止
时间:2022-07-24
本文章向大家介绍默认行为及阻止,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
默认行为及阻止
浏览器以及HTML
元素提供了一些默认行为,也可以称作默认事件。
默认行为
a标签点击跳转
<a>
标签在href
存在的情况下会点击自动跳转链接或者定位锚点,通过对<a>
的监听事件阻止默认行为后,点击链接不会跳转。
<a href="https://blog.touchczy.top" id="t1">点击跳转链接</a>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click", (e) => {
e.preventDefault();
})
</script>
鼠标右击显示菜单
在浏览器页面中鼠标右击会显示菜单,通过对document
的监听事件阻止默认行为后,右击页面不会弹出菜单,当然也可以通过监听并组织默认行为制作自定义右键菜单。
<script type="text/javascript">
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
})
</script>
input输入
在<input>
或者<textarea>
获得焦点时敲击键盘会自动输入,阻止默认行为后,敲击键盘将不会输入,可以在这个事件监听下作输入数据过滤,例如只允许输入数字。
<input id="t3" />
<script type="text/javascript">
document.getElementById("t3").addEventListener("keydown", (e) => {
e.preventDefault();
})
</script>
复选框选中
复选框的默认行为下是点击选中获取取消选中,阻止默认行为后,点击将不会改变目前状态。
<input id="t4" type="checkbox" />
<script type="text/javascript">
document.getElementById("t4").addEventListener("click", (e) => {
e.preventDefault();
})
</script>
表单提交
表单中若是存在type
为submit
的<input>
或者是<buttton>
都会触发表单的提交,阻止默认行为后表单不会自动提交。
<form action="./" id="t5">
<input type="submit" name="btn" />
</form>
<script type="text/javascript">
document.getElementById("t5").addEventListener("submit", (e) => {
e.preventDefault();
})
</script>
阻止默认行为
-
W3C
推荐的阻止默认行为的方式是event.preventDefault()
,此方法只会阻止默认行为而不会阻止事件的传播。 -
IE8
及之前的浏览器阻止默认行为需要使用window.event.returnValue = false
。 - 直接在事件处理函数中
return false
也能阻止默认行为,只在DOM0
级模型中有效。此外,在jQuery
中使用return false
会同时阻止默认行为与事件传播。
示例代码
<!DOCTYPE html>
<html>
<head>
<title>默认行为及阻止</title>
</head>
<body>
<a href="https://blog.touchczy.top" id="t1">点击跳转链接</a>
<input id="t3" />
<input id="t4" type="checkbox" />
<form action="/" id="t5">
<input type="submit" name="btn" />
</form>
<a href="https://blog.touchczy.top" id="t6">点击跳转链接</a>
</body>
<script type="text/javascript">
document.getElementById("t1").addEventListener("click", (e) => {
e.preventDefault();
})
document.addEventListener("contextmenu", (e) => {
e.preventDefault();
})
document.getElementById("t3").addEventListener("keydown", (e) => {
e.preventDefault();
})
document.getElementById("t4").addEventListener("click", (e) => {
e.preventDefault();
})
document.getElementById("t5").addEventListener("click", (e) => {
e.preventDefault();
})
document.getElementById("t6").onclick = (e) => {
return false;
}
</script>
</html>
每日一题
https://github.com/WindrunnerMax/EveryDay
参考
https://segmentfault.com/a/1190000007681900
http://www.imooc.com/article/259535?block_id=tuijian_wz
https://developer.mozilla.org/zh-CN/docs/Web/API/Event/preventDefault
- 解决VMware 7在Windows 7上无法上网的问题
- Windows Server 2008群集仲裁机制
- [C#2] 5-迭代器
- 服务器未能识别 HTTP 标头 SOAPAction 的值
- 实用代码-C#获取本机网络适配器信息及MAC地址
- WordPress 自定义 login (登录页面)CSS 样式
- [C#1] 12-特性
- HTTP Basic Authentication for RESTFul Service
- [C#2] 4-可空类型、静态类
- jquery 操作css 尺寸
- Windows 7上IIS出现http 500错误
- [C#2] 2-匿名方法
- jquery 操作css 选择器
- 主页后台源码及释义
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Rust日报】2020-08-28 Rust 1.46稳定版发布
- go语言反射
- 和同事谈谈Flood Fill 算法
- 【每周一库】 img_hash,rust下的pHash算法库
- 【Rust日报】2020-08-29 生产环境 Rust 序列化库的选择
- 【投稿】刀哥:Rust学习笔记 5
- Python测试开发django3.视图和URL配置
- 【Rust日报】2020-08-31 easy_rust 正式完成了
- Python测试开发django4.templates模板配置
- Python测试开发django5.templates模板变量传参
- 在 CLion 中创建基于 CubeMX 的 STM32 工程
- 【Rust日报】 2020-09-03 Google - XLS 加速硬件合成
- 算法篇:栈之常见题型
- 算法篇:栈之字符串相关题目
- redis的安装与启动以及注意事项