我需要构建一个窗口侦听器，该侦听器mouseover在使用的盒子上触发，但contains我不太确定如何构建它？这是我建立的一个测试：window.addEventListener("mouseover", trial)function trial(e) { const contain_material = document.getElementsByClassName("item") if(contain_material.contains(e.target)) { alert("so far so good") } else { return }}
3 回答
慕村9548890
TA贡献1884条经验 获得超4个赞
看看以下是否适合你。
function trial(e) {
const contain_material = document.getElementsByClassName("item")
for (var i = 0; i < contain_material.length; i++) {
if(contain_material[i] == e.target) {
alert("so far so good")
}
}
}
繁星点点滴滴
TA贡献1803条经验 获得超3个赞
你不能只听鼠标悬停在框元素上而不是整个页面上吗？
function handleMouseOver() {
alert('so far so good')
}
// or you can add dynamicaly with js
var boxes = document.getElementsByClassName("item");
Array.from(boxes).forEach(function() {
this.onmouseover = () => alert('so far so good')
})
// () => this is an arrow function in case you dont know
// Array.from() is because you can't use the forEach straight with a HTMLCollection
body {
display: flex;
}
.item {
width: 300px;
height: 300px;
background-color: yellow;
margin: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div class="item" onmouseover="handleMouseOver()"></div>
<div class="item" onmouseover="handleMouseOver()"></div>
<div class="item" onmouseover="handleMouseOver()"></div>
<div class="item" onmouseover="handleMouseOver()"></div>
</body>
</html>
三国纷争
TA贡献1804条经验 获得超7个赞
与其检查窗口上的悬停，为什么不检查这些元素之一何时悬停在上面。例如：
const contain_material = document.getElementsByClassName("item")
for (mat of contain_material) {
mat.addEventListener("mouseover", trial)
}
function trial(e) {
alert("so far so good")
}
添加回答
举报
0/150
提交
取消