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

JavaScript에서 마우스 버튼이 현재 작동하지 않는지를 감지하는 방법이 있습니까?

"mousedown"이벤트에 대해 알고 있지만 이것이 필요한 것은 아닙니다. 마우스 버튼을 누른 후에도 여전히 눌려 있는지 감지하고 싶습니다.

이게 가능해?

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 스타일 코드를 넘겨 받았는지 모르겠습니다. 이벤트 핸들러를 문서에 직접 첨부하는 것이 좋습니다.

이것은 오래된 질문이며 여기의 대답은 주로 버튼을 눌렀는지 여부를 추적 mousedown하고 사용하는 것을 옹호하는 것처럼 보입니다 mouseup. 그러나 다른 사람들이 지적했듯이 mouseup브라우저 내에서 수행 할 때만 실행되어 버튼 상태를 잃을 수 있습니다.

그러나 MouseEvent (현재)는 현재 어떤 버튼을 눌렀 는지 나타냅니다.

• 모든 최신 브라우저 (Safari 제외)에 사용 MouseEvent.buttons
• Safari의 경우 MouseEvent.which( Safari의 buttons경우 정의되지 않음)을 which사용 하십시오. 참고 : buttons오른쪽 및 중간 클릭과 는 다른 숫자를 사용 합니다.

에 등록하면 document, mousemove사용자 자료가 외부 후 상태가 곧 마우스 다시 내부로 업데이트됩니다 그렇다면, 빨리 커서가 브라우저를 다시 들어간다으로 즉시 실행됩니다.

간단한 구현은 다음과 같습니다.

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;

더 복잡한 시나리오가 필요한 경우 (다른 단추 / 여러 단추 / 제어 키) MouseEvent 문서를 확인하십시오. Safari에서 게임을 시작하면 더 쉬워집니다.

이에 대한 가장 좋은 방법은 다음과 같이 마우스 버튼 상태를 직접 기록하는 것입니다.

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.
}

해결책이 좋지 않습니다. 문서에서 "마우스 다운"을 한 다음 브라우저 외부에서 "마우스 업"을 할 수 있습니다.이 경우 브라우저는 여전히 마우스가 다운되었다고 생각합니다.

유일한 좋은 해결책은 IE.event 객체를 사용하는 것입니다.

나는 이것이 오래된 게시물이라는 것을 알고 있지만 마우스 위 / 아래를 사용하여 마우스 버튼을 추적하는 것이 약간 어색하다고 생각하여 일부에게 호소 할 수있는 대안을 찾았습니다.

<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>

: active 선택기는 마우스 위 / 아래보다 마우스 클릭을 훨씬 잘 처리합니다. onmousemove 이벤트에서 해당 상태를 읽는 방법 만 있으면됩니다. 이를 위해 기본 커서가 "auto"라는 사실에 속이고 의존해야했습니다. "default"로 변경하면 자동으로 기본적으로 선택됩니다.

getComputedStyle에 의해 리턴 된 오브젝트에서 페이지의 모양을 바꾸지 않고 플래그로 사용할 수있는 모든 것을 사용할 수 있습니다 (예 : border-color).

: active 섹션에서 내 사용자 정의 스타일을 설정하고 싶었지만 작동시키지 못했습니다. 가능하다면 더 좋을 것입니다.

다음 코드 조각은 document.body에서 mouseDown 이벤트가 발생한 후 2 초 후에 "doStuff"기능을 실행하려고 시도합니다. 사용자가 버튼을 올리면 mouseUp 이벤트가 발생하고 지연된 실행을 취소합니다.

크로스 브라우저 이벤트 첨부에 몇 가지 방법을 사용하는 것이 좋습니다. 예를 단순화하기 위해 mousedown 및 mouseup 속성을 명시 적으로 설정했습니다.

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;"

그런 다음 같으면 테스트하고 실행 myfunction()하십시오 .down1

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

@Pax와 내 답변을 결합하여 마우스가 다운 된 기간을 얻을 수도 있습니다.

var mousedownTimeout,
    mousedown = 0;

document.body.onmousedown = function() {
  mousedown = 0; 
  window.clearInterval(mousedownTimeout);
  mousedownTimeout = window.setInterval(function() { mousedown += 200 }, 200);
}

document.body.onmouseup = function() {
  mousedown = 0;
  window.clearInterval(mousedownTimeout);
}

그런 다음 나중에 :

if (mousedown >= 2000) {
  // do something if the mousebutton has been down for at least 2 seconds
}

MouseDown과 MouseUp을 처리하고 "나중에 길을"추적하도록 플래그 또는 무언가를 설정해야합니다 ... :(

기존 마우스 이벤트 핸들러를 사용하여 복잡한 페이지 내에서 작업하는 경우 버블 대신 캡처시 이벤트를 처리하는 것이 좋습니다 . 이렇게하려면의 3 번째 매개 변수를 addEventListener로 설정하십시오 true.

또한 event.which마우스 이벤트가 아닌 실제 사용자 상호 작용을 처리하는지 확인하는 것이 좋습니다 (예 :) elem.dispatchEvent(new Event('mousedown')).

var isMouseDown = false;

document.addEventListener('mousedown', function(event) { 
    if ( event.which ) isMouseDown = true;
}, true);

document.addEventListener('mouseup', function(event) { 
    if ( event.which ) isMouseDown = false;
}, true);

document.body 대신 문서 (또는 창)에 처리기를 추가합니다. b / c 는 창 외부의 mouseup 이벤트 가 계속 기록되도록합니다.

MouseEvent API를 사용하여 눌러 진 버튼이 있는지 확인하십시오.

document.addEventListener('mousedown', (e) => console.log(e.buttons))

귀국 :

하나 이상의 버튼을 나타내는 숫자입니다. 둘 이상의 버튼을 동시에 누르면 값이 결합됩니다 (예 : 3은 1 차 + 2 차입니다).

0 : No button or un-initialized
1 : Primary button (usually the left button)
2 : Secondary button (usually the right button)
4 : Auxilary button (usually the mouse wheel button or middle button)
8 : 4th button (typically the "Browser Back" button)
16 : 5th button (typically the "Browser Forward" button)

jQuery를 사용하여 다음 솔루션은 "페이지를 끈 다음 릴리스 사례"까지 처리합니다.

$(document).mousedown(function(e) {
    mouseDown = true;
}).mouseup(function(e) {
    mouseDown = false;
}).mouseleave(function(e) {
    mouseDown = false;
});

여러 마우스 버튼을 처리하는 방법을 모르겠습니다. 창 밖에서 클릭을 시작한 다음 마우스를 창으로 가져가는 방법이 있다면 제대로 작동하지 않을 것입니다.

jQuery 예제에서 마우스가 $ ( '. element') 위에 있으면 마우스 버튼을 누르는 것에 따라 색상이 변경됩니다.

var clicableArea = {
    init: function () {
        var self = this;
        ('.element').mouseover(function (e) {
            self.handlemouseClick(e, $(this));
        }).mousedown(function (e) {
            self.handlemouseClick(e, $(this));
        });
    },
    handlemouseClick: function (e, element) {
        if (e.buttons === 1) {//left button
            element.css('background', '#f00');
        }
        if (e.buttons === 2) { //right buttom
            element.css('background', 'none');
        }
    }
};
$(document).ready(function () {
    clicableArea.init();
});

@Jack이 말했듯 mouseup이 브라우저 창 밖에서 발생 하면 알지 못합니다 ...

이 코드는 (거의) 저에게 효과적이었습니다.

window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);

불행히도, 나는 mouseup그러한 경우 중 하나 에서 이벤트를 얻지 못할 것입니다 .

• 사용자는 키보드 키와 마우스 버튼을 동시에 누르고 브라우저 창 외부에서 마우스 버튼을 놓은 다음 키를 놓습니다.
• 사용자는 두 개의 마우스 버튼을 동시에 누르고 , 하나의 마우스 버튼을 놓은 다음 다른 하나는 브라우저 창 외부에서 해제합니다.

글쎄, 당신은 이벤트 후 다운되었는지 확인할 수 없지만, 업인지 여부를 확인할 수는 있습니다.

따라서 사용자가 버튼을 눌렀을 때 (onMouseDown 이벤트) ... 그런 다음이 켜져 있는지 (onMouseUp) 확인합니다. 작동하지 않는 동안 필요한 것을 수행 할 수 있습니다.

        var mousedown = 0;
        $(function(){
            document.onmousedown = function(e){
                mousedown = mousedown | getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.onmouseup = function(e){
                mousedown = mousedown ^ getWindowStyleButton(e);
                e = e || window.event;
                console.log("Button: " + e.button + " Which: " + e.which + " MouseDown: " + mousedown);
            }

            document.oncontextmenu = function(e){
                // to suppress oncontextmenu because it blocks
                // a mouseup when two buttons are pressed and 
                // the right-mouse button is released before
                // the other button.
                return false;
            }
        });

        function getWindowStyleButton(e){
            var button = 0;
                if (e) {
                    if (e.button === 0) button = 1;
                    else if (e.button === 1) button = 4;
                    else if (e.button === 2) button = 2;  
                }else if (window.event){
                    button = window.event.button;
                }
            return button;
        }

이 크로스 브라우저 버전은 저에게 잘 작동합니다.