如何用鼠标点击页面中的任意标签，弹出该标签的名称．

最新推荐文章于 2023-03-21 13:46:07 发布

Honey-回忆天明

最新推荐文章于 2023-03-21 13:46:07 发布

阅读量1.3k

点赞数

分类专栏：前端文章标签： JS DOM

本文链接：https://blog.youkuaiyun.com/Honey_tianming/article/details/83420421

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，通过JavaScript实现鼠标点击页面中任意元素时，弹窗显示被点击元素的标签名称。示例代码包括了div、p、span、ul和li等常见标签的样式设置。

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

话不多说，看代码

<!DOCTYPE> 
<html> 
<head>
<meta charset="UTF-8">
<title>鼠标点击页面中的任意标签，alert该标签的名称</title> 
<style> 
.box{
	height: 100px;
	background:red;
}
span{
	background:green;
}
p{
	background:blue;
}
ul{
	background:black;
}
li{
	background:yellow;
}
</style> 
</head> 
<body> 
<div class="box">这是div标签
  <p>这是div标签里的p标签</p>
  <span>这是div标签里的span标签</span>
</div>
<p>这是p标签</p> 
<span>这是span标签</span>
<ul>
    <li>这是li标签</li>
    <li>这是li标签</li>
    <li>这是li标签</li>
</ul>
</body> 

<script type="text/javascript">
document.onclick = function(e){
var e = window.event || e;
var tag = e["target"] || e["srcElement"];
alert(tag.tagName);
};
</script>
</html>