<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/***-------------------------mapTools bar -------------------***/
.mapToolbar {
width:auto;
height: 35px;
position: absolute;
right: 5px;
top: 10px;
z-index:99;
}
.mapToolbar p{
font-size:12px;
color:#333333;
font-family:"microsoft yahei";
transition:all 0.3s ease-in 0s;
-webkit-transition:all 0.3s ease-in 0s;
-moz-transition:all 0.3s ease-in 0s;
-ms-transition: all 0.3s ease-in 0s;
box-shadow: 5px 5px 5px #ccc;
}
i{
font-style:normal;
}
.mapToolbar b{
border-right:1px solid #eee;
height:20px;
top:8px;
position:relative;
float:left;
}
.tools-rows{
width:80px;
height:34px;
position:relative;
line-height:34px;
cursor:pointer;
float:left;
text-align:center;
background-color: #fff;
}
.tools-rows-fold{
width:20px;
height:34px;
position:relative;
line-height:34px;
cursor:pointer;
float:left;
background-color:#6484d9;
}
.tools-rows:hover{
height:auto;
}
.tools-rows:hover{
color:#519DDE;
}
.tools-rows span,i,em{
display:inline-block;
vertical-align:middle;
}
.tools-text{
font-style:normal;
vertical-align:middle;
}
</style>
<script src="jquery-2.1.4.js"></script></head>
<body>
<p class="mapToolbar" id="mapToolbar">
<p class="tools-rows-fold" id="fold">
<span class="fold"></span>
</p>
<b></b>
<p class="tools-rows" id="zoom_in" >
<span class="glyphicon glyphicon-zoom-in"></span><i class="tools-text">放大</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="zoom_out" >
<span class="glyphicon glyphicon-zoom-out"></span><i class="tools-text">缩小</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="zoom_prev" >
<span class="glyphicon glyphicon-arrow-left"></span><i class="tools-text">向前</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="zoom_next" >
<span class="glyphicon glyphicon-arrow-right"></span><i class="tools-text">向后</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="pan" >
<span class="glyphicon glyphicon-hand-up"></span><i class="tools-text">漫游</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="clear" >
<span class="glyphicon glyphicon-trash"></span><i class="tools-text">清除</i><em></em>
</p>
<b></b>
<p class="tools-rows" id="extent" >
<span class="glyphicon glyphicon-globe"></span><i class="tools-text">全图</i><em></em>
</p></p>
</body>
</html>
<script>
$(".tools-rows").on("click",function(evt){
var value=evt.target.id;
alert(value);
});</script>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
event.target指向触发点击事件的底层元素。。你这里实际点中的p下面的span下面的i元素，所以不会有id属性
改成
event.target最好在没有子标签嵌套的时候使用