关于页面JS 鼠标触发事件的问题
发布网友
发布时间：2022-04-26 16:29
我来回答
共1个回答
热心网友
时间：2022-05-13 18:44
在DOM中。因为会有嵌套结构，因此如果鼠标指针父DIV移动到内部的子DIV上，会触发mouseout事件，这并不是bug或者什么歧义，因为mouseout的意思就是从一个元素移动到另一个元素上。并没有说另一个元素就不能是当前元素的子元素。但你的要求依然是可以实现的。就是利用事件冒泡。例如：
html中。
<html>
<head lang="en">
<meta charset="UTF-8">
</head>
<body style="padding:0;margin:0">
<div id="sDiv" style="height:500px;background:black;padding:1px">
<div id="cDiv" style="height:100px;margin:200px;background:red"></div>
</div>
</body>
<script>
js这样写：
window.onload = function(){
document.getElementById('sDiv').onmouseout = function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.id === 'sDiv' && (!ev.toElement || ev.toElement.id !== 'cDiv')){
alert('鼠标移动出了父DIV元素。');
}
}
}
说白了。就是如果是移动到子元素中，不认为是移出父元素就好了，因此更加通用的写法如下：
function isParent (obj,parentObj){
while (obj != undefined && obj != null && obj.tagName.toUpperCase() != 'BODY'){
if (obj == parentObj){
return true;
}
obj = obj.parentNode;
}
return false;
}
window.onload = function(){
document.getElementById('sDiv').onmouseout = function(e){
var ev = e || window.event;
var target = ev.target || ev.srcElement;
if(target.id === 'sDiv' && (!ev.toElement || !isParent(ev.toElement, target))){
alert('鼠标移动出了父DIV元素。');
}
}
}
