JavaScript에서 마우스 클릭 위치를 얻는 방법은 무엇입니까? 획득하는 세 가지 방법 요약

사실 우리는 DOM의 요소를 다루어 왔습니다. 이것은 또한 휴대폰 상호 작용의 일반적인 측면입니다. 그러나 많은 프로그래머는 다른 브라우저에 나타날 것입니다. js를 사용하여 마우스 클릭 위치를 얻는 방법에 대해 설명하고 자세한 튜토리얼을 요약합니다.

1: 마우스는 화면을 기준으로 합니다.

위치를 포함하는 경우 마우스 클릭의 상대적으로 간단하게 마우스 클릭 및 사용 화면을 얻을 수 있습니다. 브라우저에서 성능은 여전히 ​​매우 동일합니다.

예:

function getMousePos(event) {             
     var e = event || window.event;             
      return {'x':e.screenX,'y':screenY}  
}

2: 마우스는 브라우저 창을 기준으로 합니다.

위를 전달하는 경우 간단한 코드 위치를 결정하려면 이것만으로는 충분하지 않은 경우가 많습니다. 왜냐하면 일반적으로 브라우저 창을 기준으로 마우스의 좌표를 가져와야 하고 창을 기준으로 마우스의 위쪽 여백과 왼쪽 여백을 각각 가져와야 하기 때문입니다. clientX 및 clientY 로 나타낼 수 있습니다.

예:

function getMousePos(event) {              
     var e = event || window.event;              
     return {'x':e.clientX,'y':clientY} 
}

3: 마우스는 문서를 기준으로 합니다.

clientX를 사용하여 clientY는 현재 브라우저 창의 좌표를 가져오지만 이러한 조건은 제한되어 있습니다. 페이지가 스크롤될 때 문서를 기준으로 한 좌표는 어떻게 해야 합니까? 이때 스크롤 변위만 추가하면 됩니다.

예:

function getMousePos(event) {
    var e = event || window.event;
    var scrollX = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
    var x = e.pageX || e.clientX + scrollX;
    var y = e.pageY || e.clientY + scrollY;
    //alert('x: ' + x + '\ny: ' + y);
    return { 'x': x, 'y': y };
}

Firefox가 pageX와 pageY의 두 가지 속성을 지원하고 이미 페이지 스크롤을 고려했기 때문에 Firefox의 현재 문제는 훨씬 간단합니다. .

위 내용은 자바스크립트에서 마우스 클릭 위치를 구하는 방법인가요? 세 가지 방법에 대한 전체 소개를 확인하세요. JavaScript 비디오 튜토리얼에 대해 자세히 알고 싶다면 PHP 중국어 웹사이트를 주목하세요.

위 내용은 JavaScript에서 마우스 클릭 위치를 얻는 방법은 무엇입니까? 획득하는 세 가지 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!