hover 和 mosueover,mouseout 真的不同

時間 2019-11-17

標籤 hover mosueover mouseout 不同简体版

原文原文鏈接

如下是個人測試代碼，須要用到jquery，主要是在火狐下發現了這一個問題 javascript

知識： css

W3C在mouseover和mouseout事件中添加了relatedTarget屬性。在mouseover事件中，它表示鼠標來自哪一個元素，在mouseout事件中，它指向鼠標去往的那個元素。
而Microsoft添加了兩個屬性：
fromElement在mouseover事件中表示鼠標來自哪一個元素。
toElement在mouseout事件中指向鼠標去往的那個元素。 html

<!DOCTYPE html>
<html>
<head>
<title>hover和mouseout</title>
<link rel="stylesheet" type="text/css" href="yy_jq_tools.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
	.warp{width:500px;margin:0 auto;margin-top:200px;}
	.test{height:30px;width:100px;background:#f00;}
	.test span{display:block;width:100px;height:30px;background:#0f0;}
</style>
</head>

<body>
<div class="warp" style="margin-top:100px;">
	<div class="test"><span style="width:80%;"></span></div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
	var $test = $('div.test'),$span = $test.children('span');
	var t_width = '100%',_cache;
	$test.bind('mousemove',function(e){
		var _this= $test,_x = e.clientX,_left = _this.offset().left,_w=_this.width();
		var _wf = _x -_left;
		if(_wf>0 && _wf<=_w){
			_cache = Math.ceil(_wf*100/_w)+'%';
			$span.css({width:_cache});
		}
	}).bind('mousedown',function(){
		t_width = _cache;
		$span.css({width:_cache});
	});


	$test.bind('mouseout',function(e){ // 火狐下有問題，出現不斷的閃爍，一會兒60%,一會兒90%。

		/* //這是jquery 1.0 中的代碼 用於判斷鼠標是否還在對象範圍內

		var p = (e.type == "mouseover" ? e.fromElement : e.toElement) || e.relatedTarget;
		// Traverse up the tree
		while ( p && p != this ) p = p.parentNode;
		// If we actually just moused on to a sub-element, ignore it
		if ( p == this ) return false;


		*/

		$span.css({width:t_width});
		//relatedTarget W3C在mouseover和mouseout事件中添加了relatedTarget屬性。在mouseover事件中，它表示鼠標來自哪一個元素，在mouseout事件中，它指向鼠標去往的那個元素。
		console.log(e.relatedTarget); //  發現有時候指向的是div.test 有時候指向的是span
	});
	/*
	$test.hover(function(){},function(){//用了hover  火狐的問題解決了
		$span.css({width:t_width});
	});
	*/
</script>
</body>
</html>

若是不使用jquery的那一段代碼，發現div的顏色是一下子綠，一下子紅，判斷不正確。 java

查看jquery源碼可發現hover是通過了對事件的處理來解決這個問題。 jquery

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。