常见事件对象属性与方法阻止默认行为(事件)

最新推荐文章于 2022-11-16 22:06:03 发布

hcoke

最新推荐文章于 2022-11-16 22:06:03 发布

阅读量474

点赞数

分类专栏： JavaScript 文章标签： javascript html 前端

本文链接：https://blog.csdn.net/m0_62962469/article/details/123581460

版权

JavaScript 专栏收录该内容

40 篇文章 0 订阅

订阅专栏

常见事件对象属性与方法：

1.返回事件类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			123
		</div>
		<script type="text/javascript">
			var div = document.querySelector('div');
			div.addEventListener('click', fn);
			div.addEventListener('mousemove', fn);
			div.addEventListener('mouseout', fn);
			function fn(e) {
				console.log(e.type);
			}
		</script>
	</body>
</html>

2.阻止默认行为(事件) 让链接不跳转或者让提交按钮不提交

preventDefault() //普通浏览器

e.returnValue //低版本浏览器 ie678

return false //return后面的代码不执行了而且只限于传统的注册方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			123
		</div>
		<a href="https://www.bilibili.com/">bilibili</a>
		<script type="text/javascript">
			var div = document.querySelector('div');
			div.addEventListener('click', fn);
			div.addEventListener('mousemove', fn);
			div.addEventListener('mouseout', fn);
			function fn(e) {
				console.log(e.type);
			}
			//2.阻止默认行为(事件) 让链接不跳转 或者让提交按钮不提交
			var a = document.querySelector('a');
			a.addEventListener('click', function(e) {
				e.preventDefault();  //dom标准写法
			})
			//3.传统的注册方式
			a.onclick = function(e) {
				//普通浏览器 e.preventDefault();
				//e.preventDefault(); //方法
				//低版本浏览器 ie678
				//e.returnValue;  //属性
				//我们可以利用return false 也能阻止默认行为 没有兼容性问题 特点：return后面的代码不执行了  而且只限于传统的注册方式
				return false;
				alert(11);
			}
		</script>
	</body>
</html>

hcoke

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
常见事件对象属性与方法阻止默认行为(事件)

常见事件对象属性与方法：1.返回事件类型<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> 123 </div> <script type="text/javascript"> var div =..
复制链接

扫一扫