자바스크립트 이벤트 처리 및 마우스 드래그 효과 구현에 대한 자세한 설명_javascript 스킬

먼저 드래그할 레이어의 렌더링(시뮬레이션 창)을 살펴보겠습니다.

끌기 효과를 얻으려면 창 위의 제목 표시줄에서 마우스 왼쪽 버튼을 누르고 동시에 마우스를 움직이면 창이 그에 따라 이동합니다.
창:

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

약간의 준비:
창은 자유로워야 하며, 창의 위치는 절대적이어야 합니다.
창에 제목 표시줄을 추가합니다. 여기서는 창 상단에 배치된 레이어를 사용하고 제목 표시줄의 마우스 커서를 설정합니다. ) 모양을 드래그(이동)합니다(크롬에서 드래그하면 커서가 텍스트 커서로 바뀌고 마우스 버튼을 놓으면 복구됩니다).

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

#win {
위치:절대 ;
너비:480px;
높이:320px;
배경색:#d4d4d4;
테두리: 1px #4d4d4d; 480px;
height:48px;
background-color:#4d4d4d;
cursor:move;
}


지정된 요소를 가져오는 유틸리티 함수를 정의합니다. ID 속성:

코드 복사 코드는 다음과 같습니다. function $id(id) {

return document .getElementById(id);

}


브라우저 핵심 ID 정의 isIE:
var isIE = (window.navigator.userAgent.indexOf("IE" ) == -1 ) ? false : true;

창 요소 및 제목 표시줄 가져오기:

코드 복사 코드는 다음과 같습니다. var win = $id("win")

var header = $id("win_header")

In 마우스와 창의 위치 정보를 편리하게 기록하기 위해, 위치 생성:

코드 복사 코드는 다음과 같습니다. 🎜> var pos =function(x, y ) { this.x = x

this.y = y

창의 초기 위치를 설정합니다(CSS의 왼쪽 값과 위쪽 값).
여기서 왜 js를 사용하여 이 두 속성을 설정하지 않으면 값을 얻을 수 없고 CSS에서 지정하면 작동하지 않는지 모르겠습니다.

코드 복사

코드는 다음과 같습니다. var originalpos = new pos(20, 20 );

창을 드래그하는 과정에서 기록해야 할 값은 다음과 같습니다.

마우스를 눌렀을 때의 마우스 커서 위치

코드 복사

코드는 다음과 같습니다. var oldmouse =new pos(0, 0); 🎜> 마우스를 눌렀을 때 창의 위치var oldpos = new pos(0, 0)

마우스를 움직일 때 창의 새 위치

var newpos = new pos (0, 0);
창의 초기 위치 설정

코드 복사


코드는 다음과 같습니다.

win.style.left = originalpos.x "px"; win .style.top = originalpos.y "px" 브라우저(IE 및 비 IE)에서는 이벤트 핸들러를 요소에 바인딩하는 방법이 다릅니다(IE에서는 attachmentEvent를 사용하고, IE가 아닌 IE에서는 addEventListener를 사용함). 이벤트 바인딩 작업을 단순화하려면 이벤트 바인딩 함수를 정의하세요.

코드 복사

코드는 다음과 같습니다.

functionbind(ev, func) { if(isIE) { 　header.attachEvent("on" ev, func) } else { 　header.addEventListener(ev, func, false)

}

이 작업을 수행한 후 마우스 이벤트 처리를 시작할 수 있습니다.
이 프로그램에서는 마우스 왼쪽 버튼으로만 창을 끌 수 있고 다른 키로는 끌 수 없기 때문에 마우스 왼쪽 버튼을 눌렀는지 확인해야 합니다. 이 판단은 여러 함수에서 사용될 예정이므로 함수로 추출하여 전달된 매개변수(마우스 키 값, 즉 어떤 키를 눌렀는지)에 따라 판단합니다. 여기서 브라우저 간의 차이점에 주의해야 합니다. IE에서는 마우스 왼쪽 버튼의 값이 1이고, IE가 아닌 경우에는 0입니다.

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

function isLeftButton(btn) {
if(isIE) {
if(btn == 1)
true를 반환합니다.
else
false를 반환합니다.
} else {
if(btn == 0)
true를 반환합니다.
else
false를 반환합니다. >}
}

드래그 동작은 마우스 왼쪽 버튼을 누르고 이동하면 됩니다. 이 동작을 공유하기 위해 마우스는 먼저 누르기 동작(mousedown)을 트리거한 다음 이동 동작(mousemove)을 트리거합니다. 실제로 드래그하는지 아니면 마우스가 창 위로 지나가는지 확인하려면 마우스 다운 상태를 기록하는 변수를 설정하세요.
var mousedown = false
CSS의 호환성 문제로 인해 여기에서 js를 사용하세요. 마우스가 창 제목 표시줄 위에 있을 때 색상 변경을 제어합니다.
호버링

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

function over(e) {
Header.style.BackgroundColor = "#5d5d5d";
}

나가기

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

function out(e) {
header.style.BackgroundColor = "#4d4d4d"
// 가끔 마우스가 작동하지 않을 때도 있습니다. be release 창에서 나가기,
// 이때 마우스 해제 이벤트
up(e)
}

누르기

누르기 이벤트에서는 마우스 왼쪽 버튼이 눌렸는지 먼저 확인해야 합니다.
그렇다면 이때 마우스와 창의 위치가 기록되고, 그렇지 않으면 기록되지 않습니다. 기록됩니다.

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

function down(e) {

e = e || 이벤트;
return;
mousedown =
oldmouse.x =
oldmouse.y = e.clientY ;
oldpos.x = parsInt(win.style.left.replace("px", ""))
oldpos.y = parseInt(win.style.top.replace("px") , "" ));
}


출시

코드 복사 코드는 다음과 같습니다. 다음: function up(e) {

if(!isLeftButton(e.button))

return;
mousedown = false; 🎜>
이동
에는 두 가지 마우스 이벤트가 포함됩니다.
누르기와 이동입니다. 이동 동작은 마우스 왼쪽 버튼을 누른 경우에만 유효합니다.
창의 새 위치는 드래그 상태에서 마우스의 이동 거리(X와 Y 사이의 거리)에 따라 결정됩니다. 즉,
새 마우스 위치를 왼쪽 버튼을 눌렀을 때 기록된 위치로 전송하고 거리를 얻은 다음 마우스로 이동한 거리에 창의 위치를 ​​더해 새 위치를 얻습니다. 창문.

코드 복사

코드는 다음과 같습니다. function move(e) { if(!isLeftButton(e.button)) return; if(mousedown) {

e =e || event

newpos.x = e.clientX - oldmouse.x; >newpos.y = e.clientY - oldmouse.y
win.style.left = (oldpos.x newpos.x) "px"
win.style.top = (oldpos.y newpos.y) "px" ;
}
}


마지막으로 요소를 바인딩해 보겠습니다.




코드 복사

코드는 다음과 같습니다.

bind("mouseover", over); bind("mouseenter", over); bind("mouseout", out) bind("blur", out); >bind( "mousedown", down); bind("mouseup", up);

bind("mousemove", move)

하지만 드래그에 문제가 있습니다. FF에서는 처음에는 정상적으로만 드래그할 수 있지만 그 이후에는 조금 지저분해집니다!