如何获取鼠标点击页面中的任意标签名称

First Post:
Last Update:

RT—-感觉这个题目蛮有意思的—开整。

我第一眼看到这个题目的时候就觉得简直so easy嘛，没什么挑战性啊，不就是给一个标签绑定一个事件，用this来搞掂就OK了么………..

结果我再仔细一看发现想的略简单…….

好吧，进入正题

我开始一直在想如何给页面上所有的元素绑定同一个事件纠结了不少时间，还百度了一下，不过没找到合适的答案，然后我就想貌似没有这种说法。然后我不知道怎么的就通过a标签想到了window和document对象。

然后给window绑定了事件，点击页面上任意位置都有反应了，如果不传参数的话打印的就是window和document对象，代码如下

1
2
3
4
5
6
7
window.onclick=function(){
  alert(this);//这里的打印结果是[object Window]
}

document.onclick=function(){
   alert(this);//这里是[object HTMLDocument]
}

然后我想到了用this不就能找到当前对象了么…..于是我就相当然的这样传参了。。。结果是果断报错

1
2
3
window.onclick=function(this){
   alert(this);
};

这样不行我就改换了一下思路。换了一个形参名，结果打印出来一串貌似鼠标监听的东东[object MouseEvent]，心里暗喜，这下貌似有戏了。

1
2
3
4
5
6
7
window.onclick=function(obj){
     alert(obj);
};

document.onclick=function(obj){
     alert(obj);
};

但是这样也看不出什么，于是果断的按下F12打开控制台。将alert改成了console.log()

然后首先进入我视线的是那个Video，而我当时点击的就是那个视频，然后就看见了toElement这个玩意…

图片
图片

MouseEvent {dataTransfer: null, toElement: video, fromElement: null, y: 346, x: 306…}
altKey: false
bubbles: true
button: 0
cancelBubble: false
cancelable: true
charCode: 0
clientX: 306
clientY: 346
clipboardData: undefined
ctrlKey: false
currentTarget: null
dataTransfer: null
defaultPrevented: false
detail: 1
eventPhase: 0
fromElement: null
keyCode: 0
layerX: 306
layerY: 742
metaKey: false
offsetX: 306
offsetY: 742
pageX: 306
pageY: 1393
path: NodeList[0]
relatedTarget: null
returnValue: true
screenX: 306
screenY: 407
shiftKey: false
srcElement: video
target: video
timeStamp: 1412860841531
toElement: video
type: “click”
view: Window
webkitMovementX: 0
webkitMovementY: 0
which: 1
x: 306
y: 346
proto: MouseEvent
这下完全找到思路了，果断将代码写为

window.onclick=function(obj){
console.log(obj.toElement);

　　alert(obj.toElement);　

};

然后输出结果如下图；

图片
图片

我当时以为这就算完了，结果貌似还是不行啊，我只需要video啊，所以我就在toElement下面找啊找，找到了tagName这个好东西..

于是代码又成为了

1
2
3
4
window.onclick=function(obj){
　　console.log(obj.toElement.tagName);
　　alert(obj.toElement.tagName);
};

然后结果如下图

图片
图片

然后这事还没完，我又在mouseEvent里面找到了三种替代方法……请看如下代码，该段代码没有检测浏览器的兼容性问题，望大神帮忙参考参考，最后希望大神轻喷，这可是我很有成就感的一次尝试呀。

最后附上整个代码：数据来源

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta content="text/html" charset="utf-8"/>
    <style type="text/css">
        body,div{
            margin: 0;
            padding: 0;
        }
        #div1{
            text-align: justify;
            border: 1px solid red;
            word-spacing: 120px;

            /*layout-flow:vertical-ideographic;*/
        }
        #div1 img{
            width: 50%;
            height: 50%;
            vertical-align: middle;
            outline: 5px solid #000 ;
            border: 2px solid red;
        }
        #div1 ul li{
            list-style-type: circle;
            color: red;
        }
        strong { voice-family: "Bob Barker", "Monty Hall", male }
    </style>
</head>
<body>
<div id="div1">
    <img src="05311K62112646.jpg" alt=""/><span>what the  time</span>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <strong>ssss</strong>
</div>
<div>
    <video controls="true" autoplay="true" width="100%" height="100%" src="ANGGUN - ONLY LOVE.mp4">你的浏览器不支持video标签</video>
</div>
<p onclick="ff(this)">sssss</p>
</body>
<script type="text/javascript">
    <!--点击页面上任意标签alert标签名字-->
    document.onclick=function(obj){
        alert(obj.target.tagName);
//        obj.target/obj.srcElement/obj.toElement 得到的结果是整个元素标签并且包括里面的内容
//        nodeName&&tagName显示的是大写标签名//localName显示的是小写的
        console.log(obj.target);
    }


</script>
</html>
打赏
支付宝 | Alipay
微信 | WeChat