mouseover 问题

honypig 2012-02-21 10:54:47
一个DIV鼠标在上面移动，只要一直在范围内，只会触发一个onmouseover事件

但是假如这个DIV中还嵌套有n个子DIV，那么在这n个子DIV之间移动的时候，每跨越一次DIV就是触发一次onmouseover事件。

代码如下：


<!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>



<script>

var times = 0;

function show(){



times = times+1;

document.getElementById("times").innerHTML=times;	



}

</script>



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

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

</head>



<body>

<label id="times"></label>

<div id="popWin" onMouseOver="show();" style="width:300px;border:50px solid #06F;height:200px;">

<div id="popWin2" style="width:150px;height:200px;float:left;background:#777;">

</div>

<div id="popWin3" style="width:150px;height:200px;float:left;background:#222;">

</div>

</div>



<br/>

<div id="popWin4" onMouseOver="show();" style="width:300px;border:50px solid #06F;height:200px;">

</div>



</body>

</html>


请高手指点这是个什么情况，如何避免多次触发，感觉不像冒泡，因为子DIV上没有onmouseover事件
...全文
125 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
三石-gary 2012-02-21
  • 打赏
  • 举报
 回复
这很正常啊。。。你自己写的方法啊。。最外层写的over方法。。
OPPPPOP 2012-02-21
  • 打赏
  • 举报
 回复
<!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>

<script>
var times = 0;
function show(ele){
var fun=arguments.callee.caller;
var evt=fun.arguments[0];
if(evt){//非IE
var that=evt.relatedTarget;
var pos=ele.compareDocumentPosition(that);
if(pos==0||pos==20){
return;
}
}else{//IE
var that=window.event.fromElement;
if(ele==that||ele.contains(that)){
return;
}
}
times = times+1;
document.getElementById("times").innerHTML=times;
}
</script>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>

<body>
<label id="times"></label>
<div id="popWin" onMouseOver="show(this);" style="width:300px;border:50px solid #06F;height:200px;">
<div id="popWin2" style="width:150px;height:200px;float:left;background:#777;">
</div>
<div id="popWin3" style="width:150px;height:200px;float:left;background:#222;">
</div>
</div>

<br/>
<div id="popWin4" onMouseOver="show(this);" style="width:300px;border:50px solid #06F;height:200px;">
</div>

</body>
</html>
liuf_fenfangjiemei 2012-02-21
  • 打赏
  • 举报
 回复
onMouseOver="show();"改为onmouseenter="show();"
峭沙 2012-02-21
  • 打赏
  • 举报
 回复 
<!DOCTYPE html>

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

<head>





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

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

</head>



<body>

	<label id="times"></label>

	<div id="popWin" style="width:300px;border:50px solid #06F;height:200px;">

		<div id="popWin2" style="width:150px;height:200px;float:left;background:#777;"></div>

		<div id="popWin3" style="width:150px;height:200px;float:left;background:#222;"></div>

	</div>

	

	<br/>

	<div id="popWin4" style="width:300px;border:50px solid #06F;height:200px;">

	</div>

	

	<script>

		var times = 0,

			showDiv = document.getElementById("times");

		document.getElementById('popWin').onmouseover = function(event){

			var e = event || window.event,

				relatedTarget = e.relatedTarget || e.fromElement;

			if(!contains(this, relatedTarget)){

				times = times+1;

				showDiv.innerHTML=times;   

			}

		}

		function contains(elem1, elem2){

			if(elem1.compareDocumentPosition){

				var state = elem1.compareDocumentPosition(elem2);

				return state === 0 || state === 20 ? true : false;

			}else{

				return elem1.contains(elem2);

			}

		}

	</script>

</body>

</html>
honypig 2012-02-21
  • 打赏
  • 举报
 回复
[Quote=引用 5 楼 lhprince1 的回复:]

HTML code

<!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>
<script>
……
[/Quote]

这位兄弟是按冒泡解决的，但效果不是我想要的。

我希望的结果是，只要以上popWin就算一次，在它以及它的子DIV里随意移动都不会重复触发事件，就是二楼兄弟的那种效果。

你这样的效果是在popWin2，和popWin3上不触发popWin的事件了，但你不论从popWin外，还是从popWin2和popWin3移动到popWin（就是那个蓝色的boader上）的时候还会触发，你可以试一下。

谢谢您的回复，同样也期待更好的方法
honypig 2012-02-21
  • 打赏
  • 举报
 回复
[Quote=引用 6 楼 maysaber 的回复:]

引用 1 楼 liuf_fenfangjiemei 的回复:
onMouseOver="show();"改为onmouseenter="show();"


我试了下，firefox也行的啊
[/Quote]

我的firefox7.0.1不行，另外测试了chrome17，safari5.1也不可以。opera 11.6倒是可以
maysaber 2012-02-21
  • 打赏
  • 举报
 回复
[Quote=引用 1 楼 liuf_fenfangjiemei 的回复:]
onMouseOver="show();"改为onmouseenter="show();"
[/Quote]

我试了下，firefox也行的啊
lhprince1 2012-02-21
  • 打赏
  • 举报
 回复 


<!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>

    <script>

        var times = 0;

        function show() {

            times = times + 1;

            document.getElementById("times").innerHTML = times;

        }

    </script>

    

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

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

</head>

<body>

    <label id="times">

    </label>

    <div id="popWin" onmouseover="show();" style="width: 300px; border: 50px solid #06F;

        height: 200px;">

        <div id="popWin2" onmouseover="event.cancelBubble=true;" style="width: 150px; height: 200px; float: left; background: #777;">

        </div>

        <div id="popWin3" onmouseover="event.cancelBubble=true;" style="width: 150px; height: 200px; float: left; background: #222;">

        </div>

    </div>

    <br />

    <div id="popWin4" onmouseover="show();" style="width: 300px; border: 50px solid #06F;

        height: 200px;">

    </div>

</body>

</html>
honypig 2012-02-21
  • 打赏
  • 举报
 回复
谢谢大家的帮助
1楼的兄弟，onmouseenter事件只有ie支持。
2楼的兄弟可以解决
jQuery的mouseover操作div
鼠标在移入到td上面之后，在td的相对位置浮动出一个div，基于相对位置。 jQuery的mouseover操作div。 使用jQuery获取鼠标所在元素。
以css 做出mouseover 即放大圖之效果
利用切割好的圖片組合，及CSS標箋，在不使用javascript條件下完成mouseover放大區域圖片的效果
JS中mouseover和mouseout多次触发问题如何解决
主要介绍了JS中mouseover和mouseout多次触发问题如何解决的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
Mouseover Fade Effect.zip
Mouseover Fade Effect
mouseover事件事例
mouseover事件事例,可以让你对mouseover有一定的了解
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章