js_DOM事件讲解-关于浏览器默认行为

最新推荐文章于 2024-06-24 16:02:25 发布

纤动科技-安卓廖神

最新推荐文章于 2024-06-24 16:02:25 发布

阅读量452

点赞数

文章标签： DOM事件-关于浏览器默认行为

本文链接：https://blog.csdn.net/qq_40709911/article/details/103388219

版权

浏览器默认行为

一: 什么是浏览器的默认行为

我们没有给浏览器添加事件，而在一定条件下浏览器自己触发的事件

比如说：1.a标签的自动跳转 2.表单数据的提交 3.页面文字选中

二: 如何阻止浏览器的默认行为？

方法一：使用event.preventDefault()方法

在要阻止浏览器默认行为的事件中添加event.preventDefaul()’代码

示例代码：

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<title>DOM分发处理器</title>
	</head>
	<body>
		<a href="https://www.baidu.com" id="link">点击跳转</a>
		<script>
			link.onclick = function(event){
            alert('点击了链接');
            event.preventDefault();
        }
		</script>
	</body>
</html>

方法二：返回false

情况一：元素通过DOM来分发处理器

可以在该事件的函数中返回false (return false)来阻止浏览器的默认行为

示例代码：

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<title>DOM分发处理器</title>
	</head>
	<body>
		<a href="https://www.baidu.com" id="link">点击跳转</a>
		<script>
			link.onclick = function(event){
            alert('点击了链接');
            return false;
        }
		</script>
	</body>
</html>

情况二：元素通过HTML属性来分发处理器

可以在js的该事件触发的函数中返回一false,在HTML对应事件的属性中返回该函数

示例代码：

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='utf-8'>
		<title>DOM分发处理器</title>
	</head>
	<body>
		<a href="https://www.baidu.com" onclick='return fun();'>点击跳转</a>
		<script>
			function fun(){
				alert('点击了链接');
				return false;
			}
		</script>
	</body>
</html>

存在的问题

有时候在阻止浏览器的默认行为之后，可能会对元素的其他事件造成一定的影响
比如说：以下代码
<input type='text'>
your mail:<input type='text' mousedown='return false;'>
此时给鼠标按下事件清除了浏览器的默认事件，但是此时的input不能获取到焦点
所以我们需要使用另外一种方式来优化我们的代码，因此我可以使用event.defaultPrevented属性来解决问题

三：event.defaultPrevented属性的使用

event.defaultPrevented属性得到的是一个布尔值，组织了浏览器的默认行为i则返回true，否则则返回false

在事件的捕获和冒泡中，阻止事件的冒泡可以使用event.stopPropagation()，但是不建议使用，因为可能会产生’dead zone’[死区]问题
假设有如下要求：希望通过event.default{revented属性来实现触发按钮的点击事件，而不触发文档的点击事件

	<button id='btn'>按钮</button>
	<script>
		document.onclick = function(event){
			if(event.defaultPrevented) return;
			alert('document点击事件触发');
		}
		btn.onclick = function (event){
			alert('button点击事件触发');
			event.preventDefault();
		}
	</script>

✪ event.stopPropagation()和event.preventDefault()方法不是同一回事，两者之间不要混淆

纤动科技-安卓廖神

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js_DOM事件讲解-关于浏览器默认行为

浏览器默认行为一: 什么是浏览器的默认行为我们没有给浏览器添加事件，而在一定条件下浏览器自己触发的事件比如说：1.a标签的自动跳转 2.表单数据的提交 3.页面文字选中二: 如何阻止浏览器的默认行为？方法一：使用event.preventDefault()方法在要阻止浏览器默认行为的事件中添加event.preventDefaul()’代码示例代码：<!...
复制链接

扫一扫