이 항목은 아직 평가되지 않았습니다.- 이 항목 평가

고급 적중 횟수 테스트

.NET Framework 3.0

Windows Internet Explorer의 DOM(문서 개체 모델)은 한동안 elementFromPoint 메서드(W3C(World Wide Web 컨소시엄)의 CSSOM View Module에서 소개)를 지원했습니다. JavaScript를 사용하는 Windows 스토어 앱도 elementFromPoint 메서드를 지원합니다. elementFromPoint 메서드는 뷰포트에서 x 및 y 좌표로 요소를 반환합니다. 페이지의 이미지 클릭처럼 단일 요소에 효과적입니다. 그러나 게임, 그래픽 편집기 및 기타 다중 계층을 사용하는 응용 프로그램에서는 elementFromPoint 메서드를 사용하여 화면의 지정된 지점과 교차하는 모든 항목을 가져올 수 없습니다.

Internet Explorer 10 및 JavaScript를 사용하는 Windows 스토어 앱에서는 msElementsFromPoint 및 msElementsFromRect 메서드를 새롭게 제공하는 데, 이러한 메서드는 각각 지정된 x 및 y 좌표의 지점 또는 직사각형 영역을 교차하는 모든 요소의 노드 목록을 반환합니다.

이 항목의 내용은 다음과 같습니다.

msElementsFromPoint 메서드
msElementsFromRect 메서드
관련 항목

msElementsFromPoint 메서드

msElementsFromPoint 메서드는 지점의 x 및 y 좌표를 사용하고 해당 지점과 교차하는 요소의 노드 목록을 반환합니다. 이 목록은 z-순서로 정렬되며 첫 번째 요소가 순서의 맨 위에 옵니다.

메서드	설명
msElementsFromPoint(x, y)	x 및 y에서 정의한 지점 아래에 있는 요소의 NodeList를 반환합니다.

다음 코드 예제는 색이 변하고 서로 겹치는 일련의 div 블록을 만듭니다. 블록을 클릭하면 msElementsFromPoint 메서드를 사용하여 클릭 위치 아래에 있는 모든 요소를 가져오고 배경색이 회색으로 바뀝니다. body 및 html을 포함하여 모든 요소가 반환되므로 nodeName이 div인 요소에서만 배경색을 변경합니다.

HTML


<!DOCTYPE html >
<html >
<head>
    <title>Hittest example</title>
    <style type="text/css">
      button
      {
        position:absolute;
        top:600px;
        left:20px;
      }
      div
      {
        display:block;
        position:absolute;
        border:2px solid black;
        opacity:0.8;        
      }
      #div1
      {
        background-color:Red;
        left:200px;
        top:200px;
        height:200px;
        width:300px;
      }    
      #div2
      {
        background-color:Pink;
        left:150px;
        top:150px;
        height:200px;
        width:300px;
      }    
      #div3
      {
        background-color:Green;
        left:250px;
        top:250px;
        height:50px;
        width:80px;
      }
      #div4
      {
        background-color:Yellow;
        left:400px;
        top:300px;
        height:250px;
        width:250px;
      }
      #div5
      {
        background-color:Purple;
        left:275px;
        top:100px;
        height:500px;
        width:20px;
      }
      #div6
      {
        background-color:Aqua;
        left:200px;
        top:175px;
        height:50px;
        width:400px;
      }
      #div7
      {
        background-color:Fuchsia;
        left:430px;
        top:100px;
        height:375px;
        width:30px;
      }            
      #div8
      {
        background-color:Lime;
        left:175px;
        top:290px;
        height:40px;
        width:450px;
      }        
    </style>
</head>
<body>
  <h1>getElementsFromPoint test</h1>
    <button id="refresh" onclick="refresh();">Refresh</button>
    <div id="div1"></div>
    <div id="div2"></div>
    <div id="div3"></div>
    <div id="div4"></div> 
    <div id="div5"></div>
    <div id="div6"></div>
    <div id="div7"></div>
    <div id="div8"></div>
<script type="text/javascript">

    window.addEventListener("click", testHit, false);
    function refresh() 
    {
      window.location.reload(false);           //reload page
    }
    function testHit(e) 
    {
      if (document.msElementsFromPoint)  //feature testing
      {
        var hitTargets = document.msElementsFromPoint(e.clientX, e.clientY); 
        // get elements from point                 
        for (var i = 0; i < hitTargets.length; i++) 
        {
          if(hitTargets[i].nodeName.toUpperCase() == "DIV")
          {
            hitTargets[i].style.backgroundColor = "gray"; 
          } //if it's a div, gray it out.               
        }
      }               
    }</script>
</body>
</html>

msElementsFromPoint는 html 요소 등을 포함하여 지점을 교차하는 모든 요소를 반환하므로 코드에서 nodeName 속성을 사용하여 div 요소만 필터링합니다.

msElementsFromRect 메서드

msElementsFromRect 메서드는 위쪽 및 왼쪽 지점과 사각형 영역의 너비 및 높이를 받고 해당 영역을 교차하는 모든 요소를 반환합니다.

메서드	설명
msElementsFromRect(left,top,width,height);	left, top, width 및 height 매개 변수에서 정의한 사각형 아래에 있는 요소의 NodeList를 반환합니다.

width 및 height 매개 변수를 추가하면 msElementsFromRect를 사용하도록 이전 예제를 수정할 수 있습니다. 예를 들면 다음과 같습니다.

JavaScript


function testHit(e) {
   if (Document.msElementsFromRect) //feature testing 
   {
      var hitTargets = document.msElementsFromRect(e.clientX - 25, e.clientY - 25, 50, 50); 
      // captures elements within 50px block 
      for (var i = 0; i < hitTargets.length; i++) {
         if(hitTargets[i].nodeName.toUpperCase() == "DIV") {
            hitTargets[i].style.backgroundColor = "gray"; 
            }  //if it's a div, gray it out. 
         }
      }
   }

이 "testHit" 함수 업데이트에서는 마우스를 클릭할 때 50픽셀 사각형 아래에 있는 요소가 반환됩니다.

고급 적중 횟수 테스트

msElementsFromPoint 메서드

msElementsFromRect 메서드

관련 항목