javascript를 사용하여 페이지의 마우스 커서 위치 코드와 event_javascript 기술을 트리거한 개체를 가져옵니다.-JS 튜토리얼-php.cn

javascript를 사용하여 페이지의 마우스 커서 위치 코드와 event_javascript 기술을 트리거한 개체를 가져옵니다.

WBOY

풀어 주다： 2016-05-16 18:39:52

원래의

1036명이 탐색했습니다.

자바스크립트를 사용하여 마우스 위치 가져오기:

코드 복사 코드는 다음과 같습니다.

 
함수 mousePosition(ev) { 
if (ev.pageX || ev.pageY) { 
return { 
x: ev.pageX, 

y: ev.pageY 
}; 
} 
return { 
x: ev.clientX document.body.scrollLeft - document.body.clientLeft, 

y: ev.clientY document.body.scrollTop - document.body. clientTop 
} 
} 

document.onmousemove; 
function mouseMove(ev){ 
ev = ev || window.event; (ev); 
} 

 

코드에 대한 자세한 설명은 원본 텍스트에 나와 있습니다. 이제 여기로 이동하세요.
먼저 evnet 개체를 선언해야 하며, 이 개체는 관계없이 활성화됩니다. 이동, 클릭, 키 누름 등. evnet의 경우 Internet Explorer에서 이벤트는 전역 변수이며 window.event에 저장됩니다. Firefox나 기타 브라우저에서는 해당 기능을 통해 이벤트를 획득합니다. document.onmousemove에 mouseMove 함수를 할당하면 mouseMove는 마우스 이동 이벤트를 받게 됩니다.
ev가 모든 브라우저에서 이벤트 이벤트를 얻으려면 ev에 이미 값이 할당되어 있으므로 Firefox에서는 "||window.event"가 작동하지 않습니다. MSIE에서는 ev가 비어 있으므로 window.event가 표시됩니다.
이 기사에서는 마우스 위치를 여러 번 얻어야 하기 때문에 이벤트 매개변수가 하나 포함된 mousePosition 함수를 설계했습니다.
MSIE 및 기타 브라우저에서 실행할 예정이므로 Firefox 및 기타 브라우저에서는 500*500 창과 마우스가 있는 경우 문서를 기준으로 마우스의 위치를 나타내기 위해 event.pageX 및 event.pageY를 사용합니다. 절대적으로 중간에 있으면 pageX와 pageY의 값이 모두 250이고, 500 아래로 스크롤하면 pageY가 750이 됩니다.
MSIE는 그 반대입니다. event.clientX와 event.clientY를 사용하여 마우스가 문서가 아닌 창의 위치와 동일함을 나타냅니다. 동일한 예에서 500 아래로 스크롤하면 clientY는 여전히 250이므로 문서와 관련된 scrollLeft 및 scrollTop 속성을 추가해야 합니다. 마지막으로 MSIE의 문서는 0,0에서 시작하지 않지만 일반적으로 작은 테두리(보통 2픽셀)를 갖습니다. 테두리 크기는 document.body.clientLeft 및 clientTop에 정의됩니다.
다행히도 이제 mousePosition 함수를 사용하여 좌표 문제를 해결했으므로 더 이상 걱정할 필요가 없습니다.

자바스크립트를 사용하여 이벤트를 발생시킨 객체 가져오기

코드 복사 코드는 다음과 같습니다.

저자별 최신 기사