鼠标点击区域之外之内产生的事件

最新推荐文章于 2024-06-25 22:34:03 发布

原创最新推荐文章于 2024-06-25 22:34:03 发布 · 4.8k 阅读

1 ·

CC 4.0 BY-SA版权

E-learning 同时被 3 个专栏收录

189 篇文章

订阅专栏

javascript

61 篇文章

订阅专栏

Jsp

41 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的点击页面任意位置隐藏特定DIV元素，并在一秒钟后自动重新显示的方法。通过监听页面点击事件并检查被点击元素的ID来判断是否执行隐藏操作。

<script type="text/javascript">
window.onload = function() {
	document.onclick = function(e) {
		var ele = e ? e.target : window.event.srcElement;
		if(ele.id !== 'the_div') {
			document.getElementById('the_div').style.display = 'none';

			// 以下为测试代码，可删除
			alert('一秒后 div 恢复');
			setTimeout(function() {
				document.getElementById('the_div').style.display = 'block';
			}, 1000);
			// 结束测试代码
		}
	};
};
</script>

<div id="the_div" style="width: 100px; height: 100px; background: #f00;"></div>