자바스크립트:마우스 버튼이 아래로 내려갔는지 확인하시겠습니까?
현재 자바스크립트에서 마우스 버튼이 다운되어 있는지 확인할 수 있는 방법이 있습니까?
'마우스다운' 행사에 대해서는 알고 있지만, 제가 필요로 하는 건 그게 아니에요.마우스 버튼을 누른 후에도 계속 누르고 있는지 확인하고 싶습니다.
가능한가요?
팍스의 솔루션과 관련하여: 사용자가 의도적으로 또는 실수로 두 개 이상의 버튼을 클릭하면 작동하지 않습니다.제가 어떻게 아는지 묻지 마세요 :-().
올바른 코드는 다음과 같습니다.
var mouseDown = 0;
document.body.onmousedown = function() {
++mouseDown;
}
document.body.onmouseup = function() {
--mouseDown;
}
다음과 같은 테스트를 통해:
if(mouseDown){
// crikey! isn't she a beauty?
}
어떤 버튼을 눌렀는지 알고 싶다면 마우스를 만들 준비를 합니다.카운터 배열을 다운하고 별도의 버튼에 대해 별도로 카운트합니다.
// 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에서는 "이벤트"라는 글로벌 이벤트 개체를 사용합니다.
부수적으로 IE에는 사용자의 경우에 유용한 기능이 있습니다. 다른 브라우저가 마우스 버튼 이벤트에 대해서만 "버튼"을 보낼 때(클릭 시, 마우스 다운 시, 마우스 업 시), IE도 마우스 이동과 함께 보냅니다.따라서 버튼 상태를 알아야 할 때 마우스 이동음 청취를 시작하고 evt.button을 받자마자 확인할 수 있습니다. 이제 마우스 버튼을 누른 내용을 확인할 수 있습니다.
// for IE only!
document.body.onmousemove = function(){
if(event.button){
// aha! we caught a feisty little sheila!
}
};
물론 그녀가 움직이지 않고 죽은 척하면 아무것도 얻을 수 없습니다.
관련 링크:
업데이트 #1: 문서.본문 스타일의 코드를 왜 이월했는지 모르겠습니다.이벤트 핸들러를 직접 문서에 첨부하는 것이 좋을 것입니다.
이고, 를 하는 것을 하는 것 .mousedown그리고.mouseup버튼을 누르는지 여부를 추적합니다. 다른 했듯이,mouseup브라우저 내에서 수행할 때만 실행되므로 버튼 상태를 추적할 수 없습니다.
그러나 MouseEvent(지금)는 현재 누르고 있는 버튼을 나타냅니다.
- 모든 최신 브라우저(iOS의 Safari v11.1+ [v11.3+] 포함)는 다음을 사용합니다.
- Safari < 11.1 (iOS에서 11.3)의 경우 다음을 사용합니다.
buttons에 Safari음)고:which합니다와 다른 합니다.buttons오른쪽 및 중간 클릭.
document,mousemove커서가 브라우저에 다시 들어오자마자 바로 실행되므로 사용자가 외부에서 해제하면 마우스를 다시 안으로 가져가자마자 상태가 업데이트됩니다.
간단한 구현은 다음과 같습니다.
var primaryMouseButtonDown = false;
function setPrimaryButtonState(e) {
var flags = e.buttons !== undefined ? e.buttons : e.which;
primaryMouseButtonDown = (flags & 1) === 1;
}
document.addEventListener("mousedown", setPrimaryButtonState);
document.addEventListener("mousemove", setPrimaryButtonState);
document.addEventListener("mouseup", setPrimaryButtonState);
이 코드는 기본 마우스 버튼(일반적으로 왼쪽)의 상태를 추적하며 다른 마우스 버튼의 상태는 무시합니다.
더 키), (//)를하고,MouseEvent문서들.
이를 위한 최선의 방법은 다음과 같이 마우스 버튼 상태에 대한 기록을 유지하는 것은 다음과 같습니다.
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.
}
해결책이 좋지 않습니다.문서에서 "마우스를 아래로" 누른 다음 브라우저 외부에서 "mouseup"할 수 있으며, 이 경우 브라우저는 여전히 마우스가 아래로 떨어졌다고 생각할 수 있습니다.
유일하게 좋은 해결책은 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 selector는 마우스를 위/아래로 이동하는 것보다 마우스 클릭을 훨씬 더 잘 처리합니다. onmouse move 이벤트에서 해당 상태를 읽는 방법만 있으면 됩니다.그렇기 때문에 저는 커닝이 필요했고 기본 커서가 "auto"이고 기본적으로 auto가 선택하는 "default"로 변경합니다.
getComputedStyle에 의해 반환되는 객체의 모든 것을 사용할 수 있으며, 이를 플래그로 사용할 수 있습니다. 예를 들어 테두리 색과 같은 페이지의 모양을 변경하지 않고 사용할 수 있습니다.
:active 섹션에서 나만의 사용자 정의 스타일을 설정하고 싶었으나 작동하지 않았습니다.가능하다면 더 좋을 것 같습니다.
기존 마우스 이벤트 핸들러로 복잡한 페이지 내에서 작업하는 경우 버블 대신 캡처 시 이벤트를 처리하는 것이 좋습니다.이렇게 하려면 다음의 세 번째 매개 변수를 설정합니다.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는 본체가 중요합니다. 창 밖의 마우스 업 이벤트가 계속 기록되도록 합니다.
MouseEvent api를 사용하여 누른 버튼(있는 경우)을 확인합니다.
// Mouse buttons
document.addEventListener('mousedown', e => console.log(e.buttons))
// Keyboard keys
document.addEventListener('keydown', e => console.log(e.key))반환:
하나 이상의 버튼을 나타내는 숫자입니다.둘 이상의 버튼을 동시에 누르면 값이 결합됩니다(예: 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)
다른 사람이 이런 일을 당했을 때는.matches와 함께:active선택기:
function mouseDown() {
return document.body.matches(":active");
}
다음 토막글은 document.body에서 mouseDown 이벤트가 발생한 후 2초 후에 "doStuff" 기능을 실행하려고 시도합니다.사용자가 버튼을 올리면 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);
}
@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
}
마우스 다운과 마우스 업을 처리하고 플래그 같은 것을 설정해야 "나중에 길을 따라" 추적할 수 있습니다. :(
짧고달콤한
왜 이전의 답들 중 하나도 나에게 맞지 않았는지 잘 모르겠지만, 나는 유레카의 순간에 이 해결책을 생각해 냈습니다.작동할 뿐만 아니라 가장 우아합니다.
본문 태그에 추가:
onmouseup="down=0;" onmousedown="down=1;"
그런 다음 테스트하고 실행합니다.myfunction()한다면down대등한1:
onmousemove="if (down==1) myfunction();"
jQuery를 사용하는 다음 솔루션은 "페이지에서 드래그한 다음 릴리스 케이스"까지도 처리합니다.
$(document).mousedown(function(e) {
mouseDown = true;
}).mouseup(function(e) {
mouseDown = false;
}).mouseleave(function(e) {
mouseDown = false;
});
여러 개의 마우스 버튼을 어떻게 처리하는지 모르겠습니다.창 밖에서 클릭을 시작할 수 있는 방법이 있다면 마우스를 창 안으로 가져오면 이 방법도 제대로 작동하지 않을 수 있습니다.
@Jack이 말했듯이, 언제.mouseup브라우저 창 밖에서 발생합니다. 우리는 그것을 알지 못합니다.
이 코드는 (거의) 저에게 효과가 있었습니다:
window.addEventListener('mouseup', mouseUpHandler, false);
window.addEventListener('mousedown', mouseDownHandler, false);
유감스럽게도, 저는 그것을 받지 못할 것입니다.mouseup다음 중 하나의 경우:
- 사용자는 키보드 키와 마우스 버튼을 동시에 누르고 브라우저 창 밖에 마우스 버튼을 놓은 다음 키를 놓습니다.
- 사용자는 두 개의 마우스 버튼을 동시에 누르고 하나의 마우스 버튼과 다른 하나의 마우스 버튼을 모두 브라우저 창 밖에서 해제합니다.
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;
}
이 크로스 browser 버전은 제게 잘 맞습니다.
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();
});
이벤트가 끝난 후 다운 여부는 확인할 수 없지만 업 여부는 확인할 수 있습니다.올라왔으면..더이상 다운되지 않았다는 뜻입니다 :Plol
따라서 사용자가 버튼을 아래로 누르고(MouseDown 이벤트에서)... 그런 다음(MouseDown 이벤트에서) 작동 상태를 확인합니다(MouseUp에서).아직 실행되지 않은 상태에서 필요한 일을 할 수 있습니다.
언급URL : https://stackoverflow.com/questions/322378/javascript-check-if-mouse-button-down
'programing' 카테고리의 다른 글
| 속성 유형이 내부 유형을 사용하므로 public으로 선언할 수 없습니다. (0) | 2023.10.16 |
|---|---|
| wo commerce는 제품을 카트에 추가한 후 firefox에서 카트가 비어 있다고 표시합니다. (0) | 2023.10.16 |
| 안드로이드 뷰 클리핑 (0) | 2023.10.16 |
| USB MIDI 장치에서 MIDI 신호를 읽기 위한 C/C++ 라이브러리 (0) | 2023.10.16 |
| 스프링 캐시 @Cacheable 메서드가 같은 클래스 내에서 호출될 때 무시됨 (0) | 2023.10.11 |