[javascript] 자바 스크립트 : 마우스 버튼이 눌 렸는지 확인?

Pax의 솔루션과 관련하여 : 사용자가 의도적으로 또는 실수로 하나 이상의 버튼을 클릭하면 작동하지 않습니다. 내가 어떻게 아는지 묻지마 :-(.

올바른 코드는 다음과 같아야합니다.

var mouseDown = 0;
document.body.onmousedown = function() { 
  ++mouseDown;
}
document.body.onmouseup = function() {
  --mouseDown;
}

다음과 같은 테스트로 :

if(mouseDown){
  // crikey! isn't she a beauty?
}

어떤 버튼을 눌렀는지 알고 싶다면 mouseDown을 카운터 배열로 만들고 별도의 버튼에 대해 별도로 계산하십시오.

// let's pretend that a mouse doesn't have more than 9 buttons
var mouseDown = [0, 0, 0, 0, 0, 0, 0, 0, 0],
    mouseDownCount = 0;
document.body.onmousedown = function(evt) { 
  ++mouseDown[evt.button];
  ++mouseDownCount;
}
document.body.onmouseup = function(evt) {
  --mouseDown[evt.button];
  --mouseDownCount;
}

이제 정확히 어떤 버튼을 눌렀는지 확인할 수 있습니다.

if(mouseDownCount){
  // alright, let's lift the little bugger up!
  for(var i = 0; i < mouseDown.length; ++i){
    if(mouseDown[i]){
      // we found it right there!
    }
  }
}

위 코드는 0부터 시작하는 버튼 번호를 전달하는 표준 호환 브라우저에서만 작동한다는 점에주의하십시오. IE는 현재 누른 버튼의 비트 마스크를 사용합니다.

• “아무 것도 누르지 않음”에 대해 0
• 왼쪽으로 1
• 오른쪽으로 2
• 중간에 4
• 및 상기의 임의의 조합, 예를 들어 좌측 + 중간의 경우 5

따라서 코드를 적절히 조정하십시오! 나는 그것을 운동으로 둡니다.

기억하십시오 : IE는… “event”라는 전역 이벤트 객체를 사용합니다.

또한 IE는 귀하의 경우에 유용한 기능을 가지고 있습니다. 다른 브라우저가 마우스 버튼 이벤트 (onclick, onmousedown 및 onmouseup)에 대해서만 “버튼”을 보내면 IE도 onmousemove와 함께 보냅니다. 따라서 버튼 상태를 알아야 할 때 onmousemove의 청취를 시작할 수 있으며 evt.button을 확인하자마자 확인할 수 있습니다. 이제 어떤 마우스 버튼을 눌렀는지 알 수 있습니다.

// for IE only!
document.body.onmousemove = function(){
  if(event.button){
    // aha! we caught a feisty little sheila!
  }
};

물론 그녀가 죽고 움직이지 않으면 아무것도 얻지 못합니다.

관련 링크 :

• 마우스 이벤트 버튼 (DOM 2)
• MSDN의 버튼

업데이트 # 1 : 왜 document.body 스타일 코드를 넘겨 받았는지 모르겠습니다. 이벤트 핸들러를 문서에 직접 첨부하는 것이 좋습니다.

답변

var leftMouseButtonOnlyDown = false;

function setLeftButtonState(e) {
  leftMouseButtonOnlyDown = e.buttons === undefined 
    ? e.which === 1 
    : e.buttons === 1;
}

document.body.onmousedown = setLeftButtonState;
document.body.onmousemove = setLeftButtonState;
document.body.onmouseup = setLeftButtonState;

var mouseDown = 0;
document.body.onmousedown = function() { 
    mouseDown = 1;
}
document.body.onmouseup = function() {
    mouseDown = 0;
}

if (mouseDown == 1) {
    // the mouse is down, do what you have to do.
}

<style>
    div.myDiv:active {
        cursor: default;
    }
</style>

<script>
    function handleMove( div ) {
        var style = getComputedStyle( div );
        if (style.getPropertyValue('cursor') == 'default')
        {
            // You're down and moving here!
        }
    }
</script>

<div class='myDiv' onmousemove='handleMove(this);'>Click and drag me!</div>

function doStuff() {
  // does something when mouse is down in body for longer than 2 seconds
}

var mousedownTimeout;

document.body.onmousedown = function() { 
  mousedownTimeout = window.setTimeout(doStuff, 2000);
}

document.body.onmouseup = function() {
  window.clearTimeout(mousedownTimeout);
}

onmouseup="down=0;" onmousedown="down=1;"

onmousemove="if (down==1) myfunction();"