자바스크립트:체크인 마우스 버튼을까?

Question

는 방법이 있을 경우 검색을 마우스 버튼을 현재에서 JavaScript?

나는에 대해 알고"mousedown"이벤트,하지만 내가 무슨 필요합니다.몇 시간 후 마우스 버튼을 누르면 나는 원하는 것을 검출할 수 있는 경우 그것은 여전히 누르면 됩니다.

이것이 가능한가요?

Answer 1

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 이상부터 시작하는 버튼 번호를 전달하는 표준 호환 브라우저에만 작동합니다. 즉, 현재 누르는 버튼의 약간의 마스크를 사용합니다.

• 0 "아무것도 누르지 않음"의 경우
• 왼쪽에 1
• 2 오른쪽
• 4 중간
• 위의 모든 조합, 예를 들어, 왼쪽 + 중간에 대한 5

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

그리고 기억하십시오 : 즉, "이벤트"라는 글로벌 이벤트 객체를 사용합니다.

우연히 IE는 귀하의 경우 유용한 기능이 있습니다. 다른 브라우저가 마우스 버튼 이벤트 (Onclick, OnMousedown 및 OnMouseUp)에 대해서만 "버튼"을 보낼 때 onMousEmove와 함께 보냅니다. 따라서 버튼 상태를 알아야 할 때 onMouseMove를 듣기 시작하고 EVT.Button을 확인하자마자 확인할 수 있습니다. 이제 마우스 버튼을 누르는 것을 알 수 있습니다.

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

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

관련 링크 :

• Mouseevent 's Button (Dom 2)
• MSDN의 버튼

업데이트 #1: 왜 내가 문서를 가져 왔는지 모르겠습니다. 이벤트 핸들러를 문서에 직접 첨부하는 것이 좋습니다.

Answer 2

이것은 오래된 질문이며, 여기서 답은 대부분 사용을 옹호하는 것 같습니다. mousedown 그리고 mouseup 버튼을 누르는 지 추적합니다. 그러나 다른 사람들이 지적했듯이 mouseup 브라우저 내에서 수행 될 때만 발사되므로 버튼 상태의 트랙을 잃을 수 있습니다.

하지만, Mouseevent (지금) 현재 어떤 버튼이 푸시되는지를 나타냅니다.

• 모든 최신 브라우저 (사파리 제외) 사용 MouseEvent.buttons
• 사파리의 경우 사용하십시오 MouseEvent.which (buttons Safari에 대해 정의되지 않습니다) 참고 : 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가 게임을 들어 올리면 더 쉬워집니다.

Answer 3

이것에 대한 최선의 접근법은 다음과 같이 마우스 버튼 상태에 대한 자신의 기록을 유지하는 것입니다.

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

Answer 4

솔루션은 좋지 않습니다. 문서에서 "MouseDown"과 브라우저 외부의 "마우스 업"을 할 수 있으며이 경우 브라우저는 여전히 마우스가 다운되었다고 생각합니다.

유일한 좋은 솔루션은 ie.event 객체를 사용하는 것입니다.

Answer 5

내가 이것을 알고 있는 이 게스트,하지만 제가 생각의 추적 마우스 단추를 사용하여 마우스/아래 느꼈다운,그래서 내가 발견되는 항소할 수 있습니다.

<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"나는 단지 그것을 변경하는"기본"는 자동 선택 기본적으로 합니다.

당신이 사용할 수 있도에서 객체에 의해 반환되는 getComputedStyle 로 사용할 수 있는 깃발을 화나게 하지 않고 당신의 페이지 예:테두리 색상입니다.

내가 좋아하는 것을 설정하는 내 자신의 사용자 정의 스타일에 활성 섹션에서만 얻을 수 없는 작동합니다.더 나은 것을 경우 가능합니다.

Answer 6

다음 스 니펫은 Mousedown 이벤트가 Document.body에서 2 초 후 "Dostuff"기능을 실행하려고 시도합니다. 사용자가 버튼을 들어 올리면 마우스 업 이벤트가 발생하고 지연된 실행을 취소합니다.

크로스 브라우저 이벤트 첨부 파일을위한 몇 가지 방법을 사용하는 것이 좋습니다. 예제를 단순화하기 위해 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);
}

Answer 7

짧고 달다

이전 답변 중 어느 것도 저에게 도움이되지 않았는지 잘 모르겠지만 유레카의 순간 에이 솔루션을 생각해 냈습니다. 작동 할뿐만 아니라 가장 우아합니다.

바디 태그 추가 :

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

그런 다음 테스트하고 실행하십시오 myfunction() 만약에 down 동등합니다 1:

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

Answer 8

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

Answer 9

당신은 마우스 딩과 마우스 업을 처리하고 "나중에 길 아래로"그것을 추적 할 깃발이나 무언가를 설정해야합니다. ... :(

Answer 10

jQuery를 사용하면 다음 솔루션은 "페이지를 끌고 릴리스 케이스"도 처리합니다.

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

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

Answer 11

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();
});

Answer 12

말했듯이 @jack, 언제 mouseup 브라우저 창 밖에서 발생합니다. 우리는 그것을 알지 못합니다 ...

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

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

불행히도, 나는 얻지 못할 것입니다 mouseup 해당 경우 중 하나의 이벤트 :

• 사용자는 키보드 키와 마우스 버튼을 동시에 누르고 브라우저 창 밖에서 마우스 버튼을 출시 한 다음 키를 릴리스합니다.
• 사용자가 누릅니다 둘 마우스 버튼은 동시에 브라우저 창 밖에서 하나의 마우스 버튼을 출시합니다.

Answer 13

만약 당신이 작업에는 복잡한 페이지와 함께 기존 마우스 이벤트 처리,내가 권하고 싶 처리에 이벤트 캡처 (대신 버블).이렇게 하려면 설정의 매개변수 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);

추가 처리기 문서(또는 창문)를 대신의 문서입니다.몸이 중요한 b/c 는 것을 보장 mouseup 이벤트 외부의 창 은 여전히 기록되어있다.

Answer 14

글쎄, 이벤트 후에 다운되었는지 확인할 수는 없지만, 올라 있는지 확인할 수 있습니다 ... 올라 오면 .. 더 이상 다운되지 않았다는 것을 의미합니다 : P lol

따라서 사용자는 버튼 다운 (OnMousEdown 이벤트)을 누르고 있습니다. 그 후에 (OnMouseUp)가 있는지 확인합니다. 그것이 일어나지 않지만 필요한 것을 할 수 있습니다.

Answer 15

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

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