• 判断鼠标是否在指定区域代码


    <div style="300px; height:300px; border:1px solid red;">
      <div id="target"><div><span>测试</span></div></div>
    </div>
    
    <style type="text/css">
    #target{  200px; height: 200px; background: #EEE;}
    #target div{ 150px; height: 150px; border:1px solid orange;}
    #target span{ display: block;  50px; height: 50px; background: gray;}
    </style>
    
    var target = document.getElementById('target');
    	if(target.addEventListener){
    		target.addEventListener("mouseout",mouseoutHander,false)
    	}else if(target.attachEvent){
    		target.attachEvent("onmouseout",mouseoutHander);
    	}else{
    		target.onmouseout = mouseoutHander;
    	}
    	function mouseoutHander(e){
    		e = e || window.event;
    		var target = e.target || e.srcElement;
    
    		  // 判断移出鼠标的元素是否为目标元素
    		  if (target.id !== 'target') {
    		    return;
    		  }
    
    		  // 判断鼠标是移出元素还是移到子元素
    		  var relatedTarget = e.relatedTarget || e.toElement;
    		  while (relatedTarget !== target
    		    && relatedTarget.nodeName.toUpperCase() !== 'BODY') {
    		    relatedTarget = relatedTarget.parentNode;
    		  }
    
    		  // 如果相等,说明鼠标在元素内部移动
    		  if (relatedTarget === target) {
    		    return;
    		  }
    
    		  // 执行需要操作
    		  alert('鼠标移出');
    	}
    

    执行以上代码,鼠标在指定区域移动就不会一直弹出警告框

  • 相关阅读:
    在 Queue 中 poll()和 remove()有什么区别?
    jdk 8 HashMap源码解读
    java 中,没有任何方法和成员变量的接口
    ArrayList、LinkedList、Vector、Array
    StringBuilder和StringBuffer
    Collection
    jdk代理和cglib代理源代码之我见
    多 线程
    Spring的@Enable*注解的工作原理
    redis 学习
  • 原文地址:https://www.cnblogs.com/diantao/p/5137665.html
Copyright © 2020-2023  润新知