javascript 이벤트 객체 좌표 이벤트 설명_javascript 기술

테스트 브라우저 버전:

IETester 6,7
IE 8.0
Firefox 3.5.5
Chrome 4.1.249.1064 (45376)
Opera 9.64
Safari 4.0


먼저 각 주류 브라우저의 좌표 속성과 그 의미를 살펴보겠습니다

In IE

event.offsetX
event.offsetY
에 상대적인 좌표 e.srcElement
이벤트를 트리거한 객체를 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다.
이벤트를 트리거한 개체를 기준으로 마우스 포인터 위치의 y 좌표를 설정하거나 가져옵니다.


event.clientX
event.clientY
항상 뷰포트 기준
클라이언트 영역을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다. 클라이언트 영역이 포함되지 않은 창 창 자체 컨트롤 및 스크롤 막대.
창의 클라이언트 영역을 기준으로 마우스 포인터 위치의 y 좌표를 설정하거나 가져옵니다. 여기서 클라이언트 영역에는 창 자체 컨트롤과 스크롤 막대가 포함되지 않습니다.


event.x
event.y
설명서에는 문서에 상대적이라고 나와 있지만 ie6/7에서는 해당 값이 clientX 및 clientY와 일치합니다
하지만 이는 심각한 문제가 아닙니다. 뷰포트의 상대 좌표와 스크롤 막대의 높이가 롤아웃되었으며 실제 x(y)를 여전히 얻을 수 있기 때문입니다. 이 문제는 ie8의 표준 모드에서 해결됩니다.

마우스를 설정하거나 가져옵니다. 상위 문서를 기준으로 포인터 위치의 x 픽셀 좌표입니다.
상위 문서를 기준으로 마우스 포인터 위치의 y 픽셀 좌표를 설정하거나 가져옵니다.

event.screenX
event.screenY
사용자 화면을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다.
사용자 화면을 기준으로 마우스 포인터 위치의 y 좌표를 설정하거나 가져옵니다.

FireFox에서

event.layerX
event.layerY
e.srcElement를 기준으로 한 좌표
개체를 기준으로 마우스 포인터 위치의 x를 설정하거나 가져옵니다. 이벤트 좌표를 트리거했습니다.
이벤트를 트리거한 개체를 기준으로 마우스 포인터 위치의 y 좌표를 설정하거나 가져옵니다.

event.clientX
event.clientY
항상 뷰포트를 기준으로
창의 클라이언트 영역을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다. 클라이언트 영역에는 창 자체 컨트롤 및 스크롤 막대가 포함되지 않습니다.
창의 클라이언트 영역을 기준으로 마우스 포인터 위치의 y 좌표를 설정하거나 가져옵니다. 여기서 클라이언트 영역에는 창 자체 컨트롤과 스크롤 막대가 포함되지 않습니다.


event.pageX
event.pageY
상위 문서를 기준으로 마우스 포인터 위치의 x 픽셀 좌표를 설정하거나 가져옵니다.
상위 문서를 기준으로 마우스 포인터 위치의 y 픽셀 좌표를 설정하거나 가져옵니다.


event.screenX
event.screenY
사용자 화면을 기준으로 마우스 포인터 위치의 x 좌표를 설정하거나 가져옵니다.
사용자 화면을 기준으로 마우스 포인터 위치의 y 좌표를 설정하거나 가져옵니다.


사실 IE와 Firefox에는 모든 속성이 포함되어 있습니다. 다른 브라우저에서는 이러한 속성을 결합하지만 의미는 완전히 동일합니다.

Chrome과 Safari
Chrome과 둘 Safari 형제는

event.offsetX
event.offsetY
event.layerX
event.layerY

event.clientX event.clientY

event.x
event.y
event.pageX
event.pageY

참고: Chrome 및 Safari event.x 이벤트의 성능 .y는 IE6 7과 일치하며 event.clientX, event.clientY


Opera는 ie6 7의 길을 확고히 따랐으며

event.offsetX event.offsetY

event.clientX
event.clientY

event.x
event.y
즉, 거의 똑같습니다. 다행히도 pageX가 있습니다. pageY
event.pageX
event.pageY

참고: Chrome 및 Safari는 물론 Opera의 이벤트도 clientX, event.clientY가 동일합니다.
ie8에서는 event.x, event.y는 다른 브라우저의 event.pageX, event.pageY와 동일합니다


일부 브라우저에서 layerX와 Will offsetX, x, pageX가 반복적으로 나타나는 이유는 무엇인가요?
W3C는 이러한 속성을 표준화하지 않았기 때문에 DOM3 초안의 MouseEvent 부분은 DOM2의 정의를 따릅니다.

long, readonly 유형의 clientX
수평 좌표는 두 쌍뿐입니다.
long, readonly 유형의 clientY
이벤트와 연결된 뷰포트를 기준으로 이벤트가 발생한 수직 좌표

screenX 유형 long, readonly
화면 좌표계 원점을 기준으로 이벤트가 발생한 수평 좌표입니다.
long, readonly 유형의 screenY
화면 원점을 기준으로 이벤트가 발생한 수직 좌표입니다.

이것은 실패이므로 표준을 지원하는 브라우저에는 방향이 없습니다. 그러나 브라우저 제조업체는 어쨌든 그것을 알아낼 수 없으며 offsetXY 및 layerXY에서 시작해야 한다고 생각했습니다. ,
pageXY와 xy 중 하나를 선택하므로 표준을 충족하기 위해 두 속성 쌍이 모두 브라우저에 입력됩니다.

무슨 일이 있어도 문제는 해결되어야 합니다.위의 호환성 보고서를 보면 코드의 프로토타입이 준비되었습니다

작성을 시작해 보겠습니다!

getEventCoord

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

1 var getEventCoord = function ( e )
2 {
3 var evt = e||event;
4 var html = document.documentElement; //의 스크롤 막대; 🎜> 6
7 //pageX 속성이 true이면 pageX를 사용하고, 그렇지 않으면 clientX를 사용합니다. html.scrollLeft
8 pageX : evt.pageX || evt.clientX html.scrollLeft,
9
10 / /pageY 속성이 true이면 pageY를 ​​사용하고, 그렇지 않으면 clientY를 사용합니다. html.scrollTop
11 pageY : evt.pageY || evt.clientY html.scrollTop,
12
13 //clientX Y 모두 동의, 서스펜스 없음
14 clientX : evt.clientX,
15 clientY : evt.clientY,
16
17 //layerX 속성이 true이면 layerX를 사용하고, 그렇지 않으면 offsetX를 사용합니다.
18 layerX : evt.layerX || evt.offsetX,
19
20 //layerY 속성이 true이면 layerY를 사용하고, 그렇지 않으면 offsetY를 사용합니다.
21 layerY : evt.layerY || 🎜>22 }
23 }



사용법은 다음과 같습니다

코드 복사 코드는 다음과 같습니다. document.onmousemove = function( e )

{

var coord = getEventCoord(e)
document.title = [coord.pageX,coord .pageY] ;
}



외관도 꽤 좋고 일상 업무에 적합하지만 여전히 몇 가지 문제가 있습니다.

1. 🎜>
evt.pageX || evt.clientX html.scrollLeft를 사용하여 판단하세요.
evt.pageX가 정의되지 않음, null, NaN, '', 0, false인 한 이 값은 왼쪽은 false이므로 오른쪽의 표현식을 계산하고
표현식의 값을 반환하며 evt.pageX 자체는 0을 반환할 기회가 있습니다. 따라서 이 판단은
typeof evt.pageX == 'number' ? evt.pageX : evt.clientX html.scrollLeft
pageX가 숫자인 경우에만 사용합니다

2. 이상한 모드에서는 작동할 수 없습니다

이상한 모드란 무엇입니까?

IE는 IE56 이전 버전과 호환되기 위해 ie6에서 두 가지 렌더링 모드인 Quicks 모드(Quicks 모드)와 표준 모드( Standards Mode)
두 모드의 차이점은 주로 CSS의 Box Model 해석과 BOM에 집중되어 있습니다. 스크롤바의 종속 객체가 변경되었다는 의미입니다.
이상한 모드에서 스크롤바는 본문에 속합니다. 스크롤바의 높이와 너비를 얻으려면 document.body.scrollTop을 사용해야 합니다.
및 표준 모드에서는 document.documentElement.scrollTop

을 사용해야 하며 두 모드 간의 전환 방법은 주로 doctype에 따라 결정됩니다. http://dancewithnet.com/2009/06/을 참조하세요. 14/aactivate-browser-modes- with-doctype/

IE6부터 IE는 document.compatMode 속성을 사용하여 문서가 이상한 모드로 전환되었는지 표준 모드로 전환되었는지 감지합니다.
값이 document.compatMode
는 BackCompat: 그게 다입니다. quirks 모드
는 CSS1Compat: 표준 모드


따라서 두 모드 모두에서 제대로 작동하려면
어느 모드를 결정해야 합니다. mode document.compatMode는
판단 방법도 매우 간단합니다. compatMode 값의 첫 글자가 b인지 여부만 판단하면 scrollTop의 종속 개체를 선택할 수 있습니다.
판단 방법은 다음과 같습니다. 이렇게 작성했습니다
document.compatMode.indexOf('b ')==0
정규식을 사용하여
/^b/i.test( document.compatMode )
두 번째로 작성할 수도 있습니다. 하나가 더 굉장해요. . 글쎄, 그냥 두 번째 버전을 사용하세요(실제로는 첫 번째 버전이 더 성능이 좋습니다)

이제 두 번째 버전을 작성해 보겠습니다

코드




복사 code

코드는 다음과 같습니다. var getEventCoord = function( e ) {

var evt = e||event, d = document ,

scrollEl = /^b/i.test( d.compatMode ) ? d.body : d.documentElement,
supportPage = typeof evt.pageX == 'number',
supportLayer = typeof evt. layerX == 'number'
return {
pageX : supportPage ? evt.clientX scrollEl.scrollLeft,
pageY : supportPageY : evt.clientY scrollEl.scrollTop,
clientX : evt.clientX,
clientY : evt.clientY,
layerX : supportLayer ? evt.layerX : evt.offsetX,
layerY : supportLayer ? evt.offsetY
}
}



붐 붐 붐, 바로 이 기능이 무엇을 할 수 있을까요? 가장 먼저 떠오르는 것은 드래그 앤 드롭 기능을 작성해 보겠습니다. .다음

코드




코드 복사

코드는 다음과 같습니다.

function dragMe( o )
{
var supportCapt = !!o.setCapture;
o.onmousedown = function(e)
{
var coord = getEventCoord( e), x = coord.layerX, y = coord.layerY;
if( supportCapt ) o.setCapture()
document.onmousemove = function(e)
{
var coord = getEventCoord (e);
o.style.left = coord.pageX - x 'px';
o.style.top = coord.pageY - y 'px'
document.onmouseup = function()
{
this.onmousemove = this.onmouseup = null;
if( supportCapt ) o.releaseCapture()
}
}
}
dragMe; ( document.getElementById('block') );

예

이벤트 <title> </title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body { font-size:12px } #block { -moz-user-select:none; width:100px; height:100px; background:gray; color:white; line-height:100px; text-align:center; } .move { cursor:move; } </style>