获取鼠标点击元素

最新推荐文章于 2024-06-15 19:18:00 发布

米白先生

最新推荐文章于 2024-06-15 19:18:00 发布

阅读量1.1k

点赞数 2

文章标签： html html5 javascript

本文链接：https://blog.csdn.net/qq_59868251/article/details/120077654

版权

js将html的所有控件都看成是一个个对象，通过js的各个属性，就能对其进行操作处理，js里对象的整体结构是树形的结构。一层一层的追溯，即可获取需要的结果。

方法一

event.srcElement：表示的当前的这个事件源。

注：

IE中,event对象有srcElement属性,但是没有target属性;

Firefox中,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：

firefox 下的 event.target = IE 下的 event.srcElement

方法二

document . elementFromPoint ( X , Y )

例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0">
		<title>获取鼠标点击元素</title>
	</head>

	<body>
		<div id="dome">
			<ul>
				<li><a href="#"><span>🍍</span></ a></li>
				<li><a href="#"><span>🍎</span></ a></li>
				<li><a href="#"><span>🍉</span></ a></li>
			</ul>
			<div>
				<div>
					<div>
						<div><a href="#">🍊</a></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("dome").onmousedown = function(e) { 
			console.log(e.target || window.event.srcElement); 
			return false;
		};
		document.getElementById("dome").onclick = function() { 
			console.log(document.elementFromPoint(event.clientX,event.clientY));
		};
	</script>
</html>

效果图

米白先生

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
获取鼠标点击元素

js将html的所有控件都看成是一个个对象，通过js的各个属性，就能对其进行操作处理，js里对象的整体结构是树形的结构。一层一层的追溯，即可获取需要的结果。方法一event.srcElement：表示的当前的这个事件源。注：IE中,event对象有srcElement属性,但是没有target属性;Firefox中,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的，即：firefox 下的 event.target = IE 下的 event.
复制链接

扫一扫