javascript阻止默认事件

最新推荐文章于 2024-06-24 15:18:03 发布

SHUIPING_YANG

最新推荐文章于 2024-06-24 15:18:03 发布

阅读量1.7k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/zhezhebie/article/details/90753673

版权

javascript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

让我们近距离了解一下事件处理函数的工作机制。在给某个元素添加了事件处理函数后，一旦事件发生，相应的javascript代码返回布尔值 true 或者 false。这样一来，当这个链接被点击时，如果这段JavaScript代码返回值是 true ，onclick事件处理函数就认为“这个链接被点击了”；反之，如果返回值是 false ，onclick事件处理函数就认为“这个链接没有被点击”。
可以通过下面这个简单测试去验证这一结论：

测试代码：

<a href="http://www.baidu.com" onclick="return false;">Click me</a>

当点击这个链接时，因为 onclick 返回的是false，所以这个链接的默认行为没有被触发。
同样道理，我们在onclick里面调用某个自定义的js方法的时候，可以在调用方法后增加一条**return false;**语句，就可以防止默认行为的出现。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>SHow Pictures</title>
</head>
<body>
	<a href="http://www.baidu.com" onclick="return false;">Click me</a>
	<h3>Click Th link,show the picture.</h3>
	<div>
		<ul>
			<li>
				<a href="imgs/carrots-on-earth.jpg" onclick="showPic(this); return false;">Earth</a>
			</li>
			<li>
				<a href="imgs/flying-poodle-ears.jpg" onclick="showPic(this); return false;">Ears</a>
			</li>
			<li>
				<a href="imgs/playful-patterned-sphere-hot-air-balloon-floats-in-blue-sky.jpg" onclick="showPic(this); return false;">Sky</a>
			</li>
		</ul>
	</div>
	<img id="placeholder" src="imgs/null.jpg" width="400px" alt="">
	<script src="pic.js"></script>
</body>
</html>

pic.js代码：

function showPic(whichPic) {
    var placholder = document.getElementById("placeholder");
    var source = whichPic.getAttribute("href");
    placeholder.setAttribute('src', source);
}