JS 마우스 좌표 위치 가져오기 예제 분석_Javascript 기술

이 기사에서는 JS를 사용하여 마우스 좌표 위치를 얻는 방법을 분석합니다. 참고할 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

마우스의 좌표 위치는 뷰포트에서의 마우스 좌표 위치(clientX, clientY), 페이지에서의 마우스 좌표 위치(pageX, pageY), 뷰에서의 마우스 좌표 위치입니다. 마우스가 있는 화면(screenX, screenY) 뷰포트의 좌표 위치(clientX, clientY)와 화면에서 마우스의 좌표 위치(screenX, screenY)는 모든 브라우저에서 지원되지만 뷰포트의 좌표 위치는 페이지(pageX, pageY)에 마우스를 대는 것은 IE8 이하 버전에서는 지원되지만, 상관은 없습니다. pageX와 pageY의 값은 scrollLeft와 scrollTop을 통해 계산할 수 있습니다.

첫 번째는 크로스 브라우저 이벤트 객체입니다

var EventUtil = {
  addHandler:function(elem,type,handler){
    if(elem.addEventListener)
    {
      elem.addEventListener(type,handler,false);
    }else if(elem.attachEvent)
    {
      elem.attachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=handler;
    }
  },
  removeHandler:function(elem,type,handler){
    if(elem.removeEventListener)
    {
      elem.removeEventListener(type,handler,false);
    }else if(elem.detachEvent)
    {
      elem.detachEvent("on"+type,handler);
    }else
    {
      elem["on"+type]=null;
    }
  },
  getEvent:function(event){
    return event?event:window.event;
  },
  getTarget:function(event){
    return event.target||event.srcElement;
  },
  preventDefault:function(event){
    if(event,preventDefault){
      event.preventDefault();
    }else{
      event.returnValue = false;
    }
  },
  stopPropagation:function(event){
    if(event.stopPropagation){
      event.stopPropagation();
    }else{
      event.cancelBubble=true;
    }
  }
};

1. 뷰포트 좌표 위치

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Client coordinages: "+event.clientX+","+event.clientY);
});

2.화면 좌표 위치

var div = document.getElementById("myDiv");
EventUtil.addHandler(div,"click",function(event){
   event = EventUtil.getEvent(event);
   alert("Screen coordinates: "+event.screenX+","+event.screenY);
});

3. 페이지 좌표 위치

var div = document.getElementById("myDiv");
EventUtil(div,"click",function(event){
   event = EventUtil.getEvent(event);
   var pageX = event.pageX;
   var pageY = event.pageY;
   if(pageX==undefined)
  {
     pageX=event.clientX+document.body.scrollLeft||document.documentElement.scrollLeft;
  }
   if(pageY==undefined)
   {
     pageY = event.clientY+document.body.scrollTop||document.documentElement.scrollTop;
   }
   alert("Page coordinates: "+pageX+","+pageY);
});

JavaScript 마우스 조작과 관련된 더 많은 콘텐츠에 관심이 있는 독자는 이 사이트의 특별 주제인 " JavaScript 마우스 조작 기술 요약"

을 확인할 수 있습니다.

이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.