0
点赞
收藏
分享

微信扫一扫

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

西特张 2022-03-18 阅读 154

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

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>
举报

相关推荐

juqery 阻止默认事件发生

0 条评论