光标从一个div移到它的嵌套div, 也触发onmouseout, 如何解决?

xiao7cn 2007-11-30 04:58:01

从父div移动到子div, 从子div移动到父div, 都触发onmouseout方法.
够烦人的,如何解决?



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>



<body>

<div style="background:#CCCCCC;height:300px;width:300px" onmouseout="alert('mouseout')">

	<div style="background:#333333; margin:50px 50px 50px 50px;height:200px;width:200px">

	</div>

</div>

</body>

</html>

...全文

262 10 打赏收藏转发到动态举报

写回复

用AI写文章

10 条回复

切换为时间正序

请发表友善的回复…

发表回复

lip009 2007-11-30

打赏
举报



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>无标题文档</title>

</head>



<body>

<div id="test" onmouseout="mouseout();" style="left:0px;top:0px;background:#CCCCCC;height:300px;width:300px">

    <div style="background:#333333; margin:50px 50px 50px 50px;height:200px;width:200px">

    </div>

</div>

</body>

</html>

<script>

	function mouseout(){

                var test=document.getElementById("test");

		var e=window.event;

		var left=parseInt(test.style.left);

		var width=parseInt(test.style.width);

		var top=parseInt(test.style.top);

		var height=parseInt(test.style.height);

                //利用事件触发时鼠标位置来防止该现象

		if(e.clientX > left && e.clientX < (left+width) && e.clientY > top && e.clientY < (top+height)){

			

		}else{

			alert("mouseout");

		}

	}

</script>

WTFcsdn 2007-11-30

打赏
举报

sorry，我的意思是 s_liangchao1s 得分～

WTFcsdn 2007-11-30

打赏
举报

楼上的得分～

WTFcsdn 2007-11-30

打赏
举报

onmouseout不支持cancleBubble,各位注意

s_liangchao1s 2007-11-30

打赏
举报

onmouseleave="alert('mouseout')

aaron81939097 2007-11-30

打赏
举报

event.cancleBuble=true

aaron81939097 2007-11-30

打赏
举报

在事件开始执行时加event.cancleBuble=false

rotApple 2007-11-30

打赏
举报

楼上的,不要搞得吓人啊...

在子DIV里面写onmouseout="onmo(event);"

function onmo(event)
{
alert("onmouseover");
if(event.preventDefault)
event.preventDefault();
event.cancelBubble = true;
}

xiaolei1982 2007-11-30

打赏
举报

(function (bool) {

//兼容FF一些方法

var html;



if (bool) {



html = window.HTMLElement.prototype;



window.__defineGetter__("event", function () {

//兼容Event对象

var o = arguments.callee;



do {



if (o.arguments[0] instanceof Event) return o.arguments[0];



} while (o = o.caller);



return null;



});



Event.prototype.__defineGetter__("fromElement", function () {

/*

这里：

onmouseover的时候relatedTarget为鼠标离开（onmouseout）的对象

onmouseout的时候relatedTarget为鼠标当前（onmouseover）的对象

*/

return this.relatedTarget;



});



html.contains = function (o) {

do {

if (o == this) return true;

} while (o = o.parentNode);

return false;

};



}



})(/Firefox/.test(window.navigator.userAgent));



window.onload = function () {



var wc = document.getElementById("ta");

wc.onmouseover = function () {

var wc = this, e = window.event;

if (!wc.contains(e.fromElement)) alert("over");

};



wc.onmouseout = function () {

var wc = this, e = window.event;

if (!wc.contains(e.toElement || e.fromElement)) alert("out");

};

};