鼠标点击页面中的任意标签，alert该标签的名称．

最新推荐文章于 2024-05-29 22:02:56 发布

原创最新推荐文章于 2024-05-29 22:02:56 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

33 篇文章

订阅专栏

20 篇文章

订阅专栏

本文介绍两种方法实现鼠标点击页面中的任意标签时，alert该标签的名称。第一种方法利用事件冒泡特性，通过监听body元素上的点击事件来获取被点击元素的标签名；第二种方法通过遍历所有页面元素并为每个元素绑定点击事件来实现相同功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在某次web前端笔试题上看到了这个题目

请实现，鼠标点击页面中的任意标签，alert该标签的名称.(注意兼容性)

解决办法：

方法一

事件的有捕获类型和冒泡类型

在这里我们可以利用冒泡解决该问题

 var el = document.getElementsByTagName('body');

el[0].onclick=function(event){

evt=event||window.event;

var selected=evt.target||evt.srcElement;

alert(selected.tagName);

方法二：进行遍历

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遍历所有标签进行添加click事件</title>
</head>
<body>
    <div class="alert">div</div>
    <a href="javascript:;" class='alert'>a</a>
    <b class="hel">b</b>
    <script>
        	function getTagName(){
	return document.getElementsByTagName("*");
		}
		
	function stopPropagation(e) {  
              e = e || window.event;  
            if(e.stopPropagation) { //W3C阻止冒泡方法  
              e.stopPropagation();  
            } else {  
           e.cancelBubble = true; //IE阻止冒泡方法  
          }  
}
        window.onload=function(){
            var tagObj=getTagName();
			console.log("nihaofdfdfdfdfdfdf");
            for(var i=0,max=tagObj.length;i<max;i++){
                tagObj[i].onclick=function(e){
	
				    stopPropagation(e);
                    alert(this.tagName);
                }
            }
        }
    </script>
</body>
</html>