关于页面JS 鼠标触发事件的问题
我写了一个控制父DIV的mouseout的事件，当我建子DIV之后，鼠标触碰到子DIV后就判定离开了，但是我的鼠标还在父DIV的框里。这是为什么？...
我写了一个控制父DIV的mouseout的事件，当我建子DIV之后，鼠标触碰到子DIV后就判定离开了，但是我的鼠标还在父DIV的框里。这是为什么？
展开
1个回答
展开全部
在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元素。');
}
}
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
