美文网首页
2018-07-10 判断页面那个元素被点击了

2018-07-10 判断页面那个元素被点击了

作者: isaaCyu | 来源:发表于2018-07-10 15:47 被阅读8次

代码如下。

<html>
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" />
</body>

</html>

首先因为浏览器的兼容性问题,如

IE下,event对象有srcElement属性,但是没有target属性;
Firefox下,event对象有target属性,但是没有srcElement属性.但他们的作用是相当的

因此使用下面的代码获取事件源targ

if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement

nodeType属性

html文档中 节点具有只读的nodeType属性


因此点击页面后 获取事件源的nodeType属性,当其等于3是说明其为文本,他的父元素就是我们想要得到的被点击的那个元素。通过tagName即可获得该标签的名字

相关文章