JavaScript：整个网页的点击事件、event.ClientX获取点击的坐标

执行下面代码，本来是要实现整个页面的点击事件，但其实只有黑框部分才有点击事件，因为body是靠内容撑起来的。

<!DOCTYPE html>
<html>
<head>
	<title>学习事件</title>
<style type="text/css">
	body{
	border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
	document.body.onclick = function(){
		alert("something");
	}
};
</script>
</head>
<body>
<input type="button" value="点击">
</body>
</html>

 如果要实现整个页面的点击事件，那么把body去掉，直接使用document.onclick，那么无论点击哪儿，都会触及点击事件

<!DOCTYPE html>
<html>
<head>
	<title>学习事件</title>
<style type="text/css">
	body{
	border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
	document.onclick = function(){
		alert("something");
	}
};
</script>
</head>
<body>
<input type="button" value="点击">
</body>
</html>

 注：button无实际作用，只是为了撑开body而引入的

下面介绍获取鼠标的点击位置，很简单，加入event.clientX和event.clientY

<!DOCTYPE html>
<html>
<head>
	<title>学习事件</title>
<style type="text/css">
	body{
	border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
	document.onclick = function(){
		alert("("+event.clientX+","+event.clientY+")");
	}
};
</script>
</head>
<body>
<input type="button" value="点击">
</body>
</html>

最后，onclick的函数可以传入事件参数，如下考虑了兼容性

<!DOCTYPE html>
<html>
<head>
	<title>学习事件</title>
<style type="text/css">
	body{
	border: 1px solid black;
}
</style>
<script type="text/javascript">
window.onload = function(){
	document.onclick = function(ev){
		var oEvent = ev || event;//考虑了兼容性
		alert("("+oEvent.clientX+","+oEvent.clientY+")");
	}
};
</script>
</head>
<body>
<input type="button" value="点击">
</body>
</html>

 

posted @ 2020-02-16 21:36  昨夜昙花  阅读(47)  评论(0)    收藏  举报