[팁] Select 드롭다운 목록이 DIV 메뉴를 덮어쓰는 다른 해결 방안

5382 단어 html브라우저iframe테스트divbutton
최근 작업 중에 이러한 문제를 접하게 되었다. 사이즈 선택에 사용되는 하단 목록(html select 라벨 구현)을 열고 선택하지 않고 마우스를 페이지 머리의 메뉴 표시줄로 이동할 때 메뉴 표시줄은 onmouseover 이벤트를 받아들여 DIV가 구현한 메뉴를 표시하지만 이 조작은 페이지의 초점을 select에서 옮기지 않았다. 즉, select는 여전히 열려 있는 상태이고 문제가 발생했다.열린 옵션 목록이 팝업 메뉴를 덮어씁니다!사용자 체험이 좋지 않다.
이 문제의 본질적인 원인은 브라우저에서 select가 팝업하는 옵션 목록의 등급이 DIV의 등급보다 높다는 것이다. 즉, 기본적으로 DIV 위에 표시되기 때문에 z-index 스타일을 통해 변경할 수 없다.검색해 보니 인터넷에서도 몇 가지 방법을 제시했는데 주로 iframe를 통해 이루어진다. 왜냐하면 iframe의 디스플레이 등급이 select의 옵션 목록보다 높기 때문이다!그러나 내가 겪은 이 문제에 대해 이런 방식의 해결점은 메뉴에 놓여 있다. 즉, 나는 메뉴의 실현 방식을 바꾸려고 하는 코드이다. 메뉴의 이 코드는 전체 시스템에 인용된 것이다. 이 변동의 파급 범위가 너무 넓어서 다른 문제를 일으키기 쉽고 전면적인 것을 시험하기 어렵다!
동료와 토론을 한 후에 우리는 해결점을 select로 옮기기로 결정했다. 우리의 생각은 비교적 큰 DIV(또는 페이지 자체에 이런 DIV가 존재함)를 정의하면 이 select(팝업된 옵션 목록 포함)를 완전히 포함하고 이 DIV에 onmouseout 이벤트를 정의한다. 마우스를 이 DIV에서 옮기면 select 대상의 onblur 방법을 사용해서 초점을 없애고select에서 팝업할 옵션 목록을 회수합니다!이렇게 하면 사용자가 select를 열면 마우스를 페이지 머리의 메뉴 표시줄로 옮깁니다. 이 과정에서 이 select는 자동으로 닫히고 메뉴의 표시 효과에 영향을 주지 않습니다.또한 사용자가 이 DIV 내에서 수행하는 작업은 이전과 다르지 않습니다.
코드를 쓰는 과정에서 비교적 재미있는 상황을 발견했다. 바로 DIV에 포함된 요소이다. 마우스가 DIV 안에서 움직이고 그 내부의 어떤 요소로 이동하면 onmouseout 이벤트를 촉발할 수 있다!
참고할 수 있도록 코드를 첨부합니다.
 
  
<html>  
   
<head>   


<script type="text/javascript">

	function testkkk(oEvent, divObj){
	
	  // get the scroll's position
		var scrollTop =  document.documentElement.scrollTop;
		var scrollLeft = document.documentElement.scrollLeft;
		// get current mouse x axis
		var mcurrentX = oEvent.clientX + scrollLeft;
		// get current mouse y axis
		var mcurrentY = oEvent.clientY + scrollTop;
		
		// in the IE browser, when your mouse hover on the select option, the  value of mcurrentX and mcurrentY will be negative
		if(mcurrentX < 0 || mcurrentY < 0){
			
			return;	
		}
		// get div parent element
		var divParent = divObj.offsetParent;
		var parentOffsetLeft = 0;
		var parentOffsetTop = 0;
		if(divParent){
			
				parentOffsetLeft = divParent.offsetLeft;
				parentOffsetTop = divParent.offsetTop;
		}
		// think about there are some difference among the browers, it will shrink the mouse move area 10px
		// get the div element's x axis
		var areaX = divObj.offsetLeft + parentOffsetLeft + 10;
		// get the div element's y axis
		var areaY = divObj.offsetTop + parentOffsetTop + 10;
		// calculate the x axis of the div's right down corner
		var areaLX = areaX + divObj.offsetWidth -10;
		// calculate the y axis of the div's right down corner
		var aredLY = areaY + divObj.offsetHeight -10;
		
		if(mcurrentX <= areaX || mcurrentX >= areaLX || mcurrentY <= areaY || mcurrentY >= aredLY ){
			
			var selObj = divObj.getElementsByTagName("select")[0];
			if(selObj != null){
				//alert("mcurrentX : " + mcurrentX + " , mcurrentY : " + mcurrentY + " , " + " areaX: " + areaX + " , " + " areaY : " + areaY + " , areaLX : " + areaLX + " , aredLY: " + aredLY);
				selObj.blur();
			}
		}
	}
</script>
</head>  
   
<body >
	
	
	<div>
		 adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
	</div>
	<div id = "ddddddd" style="background:#FF0000;width:500px;" onmouseout="testkkk(event, this)">

		<input type="text" id="jjjdddd" /> <br>
		<input type="button" value="    " id="test"  />
		<input type="hidden" id= "jjtest" />

		<br/>
		<br/>
		<br/>

		  Select：  <select     name="selcon" id="selTestdddd"  >  
							      <option>   aaa</option>  
							      <option>   bbb</option>  
							      <option>   ccc</option>  
						      </select>
      
     <br/>
     <br/>
      
     <div>
      	
		 adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
     adfdsafsadfsadfsadfdsafasdf<br/>;
                     
      	
      </div>
      
		</div>

	</body>  

   
</html>

 
실현 과정에서 Scroll 스크롤 막대와 종합 부모 용기의 상대적인 위치를 종합적으로 고려하여 실제 요소의 실제 좌표를 계산해야 한다!
페이지의 빨간색 구역은 설정된 DIV입니다. 그 다음에 내부에 select와 다른 요소를 포함합니다. 사용자가 select를 열면 DIV 내부에서 움직이면 select는 변화가 없습니다. 사용자의 마우스가 이 빨간색 구역을 옮기면 select는 자동으로 닫힙니다!
String Resource에 추가 String Resource 포함
페이지의 flex와div 마스크 효과 및 입력법 문제

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage