纯js如何获取鼠标所在位置的div元素并给元素设置红色边框,当鼠标点击的时候打印控制台这个div元素
时间: 2024-05-05 09:16:20 浏览: 12
可以使用事件委托的方式来实现,在父元素上绑定mousemove和click事件,然后根据鼠标所在位置获取对应的子元素,并设置边框和打印控制台。
示例代码如下:
HTML:
```
<div id="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
```
CSS:
```
.child {
width: 100px;
height: 100px;
border: 1px solid #ccc;
margin: 10px;
}
```
JS:
```
var parent = document.getElementById("parent");
parent.addEventListener("mousemove", function(event) {
var target = event.target;
if (target.classList.contains("child")) {
target.style.border = "1px solid red";
}
});
parent.addEventListener("click", function(event) {
var target = event.target;
if (target.classList.contains("child")) {
console.log(target);
}
});
```
在mousemove事件中,首先判断当前鼠标所在的元素是否是子元素,如果是,则给该元素设置边框为红色。在click事件中,同样判断是否是子元素,如果是,则打印控制台该元素。