a标签下的img 为什么鼠标移入移出的事件同时触发啊

[sinat_15207765]

部分代码如下：
<script type="text/javascript">

window.onload = function (){

var mDiv = document.getElementById('one'),
mA = mDiv.getElementsByTagName('a');
for (var i = 0; i < mA.length; i++) {
mA[i].onmouseover = function(){
console.log('1') }

};
for (var i = 0; i < mA.length; i++) {
mA[i].onmouseout = function(){
console.log('2')
}

};

}

</script>

问题是：鼠标移入每一个a标签时，会触发一次鼠标移入，一次鼠标移出，再一次鼠标移入，总共出发了三次事件，这是为什么啊！！

[liusaint1992]

给a标签设置： width:图片width. height:图片height. 可以解决这个问题。

[liusaint1992]

我错了，貌似不能，再看一下。

[liusaint1992]

		window.onload = function (){

			var mDiv = document.getElementById('one'),
			mA = mDiv.getElementsByTagName('a');
			for (var i = 0; i < mA.length; i++) {
				mA[i].onmouseover = function(e){
					if(checkHover(e,this)){ 
						console.log('1') ;
					}            
				}

			};
			for (var i = 0; i < mA.length; i++) {
				mA[i].onmouseout = function(e){
					if(checkHover(e,this)){ 
						console.log('2');
					}
				}

			};

		}

		function checkHover(e, target) {  
			if (getEvent(e).type == "mouseover") {  
				return !contains(target, getEvent(e).relatedTarget  
					|| getEvent(e).fromElement)  
				&& !((getEvent(e).relatedTarget || getEvent(e).fromElement) === target);  
			} else {  
				return !contains(target, getEvent(e).relatedTarget  
					|| getEvent(e).toElement)  
				&& !((getEvent(e).relatedTarget || getEvent(e).toElement) === target);  
			}  
		}  

		function contains(parentNode, childNode) {  
			if (parentNode.contains) {  
				return parentNode != childNode && parentNode.contains(childNode);  
			} else {  
				return !!(parentNode.compareDocumentPosition(childNode) & 16);  
			}  
		}  
//取得当前window对象的事件  
function getEvent(e) {  
	return e || window.event;  
}  

参考： http://blog.csdn.net/ltx851201/article/details/6800553 我这边试了可以解决，楼主试一试。

[天际的海浪]

因为因为鼠标移入a标签下的img时也会触发a标签的 onmouseout 事件 你改用 jquery 的 mouseenter() 和 mouseleave() 就好了

[liusaint1992]

http://www.w3school.com.cn/tiy/t.asp?f=jquery_event_mouseenter_mouseover 另外，你可以考虑试试 这个事件 。

			for (var i = 0; i < mA.length; i++) {
				mA[i].onmouseenter = function(e){
						console.log('1') ;
				}

			};
			for (var i = 0; i < mA.length; i++) {
				mA[i].onmouseleave = function(e){
						console.log('2');
				}

			};