原生js事件处理e的pageX、pageY的兼容性处理

最新推荐文章于 2023-07-05 15:40:48 发布

每一天，每一步

最新推荐文章于 2023-07-05 15:40:48 发布

阅读量609

点赞数

分类专栏： javaScript 文章标签： js javascript css html5

本文链接：https://blog.csdn.net/u010234868/article/details/118531167

版权

javaScript 专栏收录该内容

135 篇文章 12 订阅

订阅专栏

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body {
			margin: 0;
			/*添加高度使其出现滚动条*/
			height: 1000px;
		}
		#box {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 100px;
			/*添加margin-top*/
			margin-top: 500px;
		}
	</style>
</head>
<body>
	<div id="box"></div>
	<script src="js/common.js"></script>
	<script>
		// e.pageX e.pageY IE9+
		// pageY = clientY + 页面滚动出去的距离
		var box = document.getElementById('box');
		box.onclick = function (e) {
			e = e || window.event;
			console.log(getPage(e).pageX); // 传入参数e
			console.log(getPage(e).pageY);
		}

		// 获取鼠标在页面上的位置，兼容性处理
		function getPage(e) { // 传入参数e
			var pageX = e.clientX + getScroll().scrollLeft;
			var pageY = e.clientY + getScroll().scrollTop;
			return {
				pageX: pageX,
				pageY: pageY
			}
		}
	</script>
</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

每一天，每一步

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js事件处理e的pageX、pageY的兼容性处理

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body { margin: 0; /*添加高度使其出现滚动条*/ height: 1000px; } #box { width: 200px; height: 200px; bac.
复制链接

扫一扫