> 웹 프론트엔드 > JS 튜토리얼 > JS 마우스 좌표 위치 가져오기 예제 분석_Javascript 기술

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

WBOY
풀어 주다: 2016-05-16 15:19:02
원래의
1221명이 탐색했습니다.

이 기사에서는 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 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿