마우스 이벤트 종류
- mousedown : 버튼을 누를때
- mouseup : 버튼을 누르고 있다가 뗄 때(모든버튼해당)
- mouseover(~위에) : 마우스 커서가 요소 바깥에 있다가 요소 안(요소 위에)으로 움직일 때
- mouseout : 커서가 반대로 요소 안에 있다가 밖으로 나갈 때
- mousemove : 마우스가 움직일 때
- click : 클릭 한 후
- dbclick : 연속으로 빠르게 클릭
- contextmenu : 오른쪽 마우스 클릭
마우스버튼과 관련한 e.button
<!DOCTYPE html>
<html>
<head>
<title>TensorFlow.js Tutorial - boston housing </title>
<!-- Import TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<script src="10.3.js"></script>
</head>
<body>
<button id="button" oncontextmenu="event.preventDefault();">Click here with your mouse...</button>
<p id="log"></p>
<script>
let button = document.querySelector('#button');
let log = document.querySelector('#log');
button.addEventListener('mouseup', logMouseButton);
function logMouseButton(e) {
if (typeof e === 'object') {
log.textContent = `Unknown button code: ${e.button}`;
}
}
</script>
</body>
</html>버튼 클릭시 해당 숫자가 출력되는데
이때 숫자의 경우
좌클릭 : 0
중간클릭 : 1
우클릭 : 2
뒤로가기 클릭 : 3
앞으로가는 클릭 : 4
형태이다.
Event의 shift, alt, ctrl, meta 프로퍼티
사용법 : event.프로퍼티 형태로 T/F 형태이다.
<!DOCTYPE html>
<html>
<head>
<title>TensorFlow.js Tutorial - boston housing </title>
<!-- Import TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
</head>
<body>
<button id="button">Alt, Shift 키를 누른 상태에서 클릭해주세요!</button>
<script>
button.onclick = function(event) {
console.log(`shiftkey ${event.shiftKey}`);
console.log(`altkey ${event.altKey}`);
console.log(`ctrlkey ${event.ctrlKey}`);
console.log(`metakey ${event.metakey}`);
};
</script>
</body>
</html>ctrl alt shift를 전부 눌렀을 때 아래와 같이 실해된다.
metakey란?
Mac 사용자도 지원하는 프로그램을 만들려면 Ctrl키와 click이벤트가 발생했을 때 나타나는 효과가 Cmd키와 click이벤트가 발생했을 때 나타나는 효과와 동일하도록 코드를 작성해야한다.
물론 Mac 사용자가 Ctrl 키와 클릭을 동시에 하도록 강제할 수 있긴 합니다. 그런데 MacOS는 Ctrl 키와 마우스 왼쪽 버튼을 함께 누른 경우 마우스 오른쪽 버튼을 누른 것으로 해석하기 때문에 문제가 발생 Windows, Linux에선 click 이벤트로 해석될 수 있는 동작이 MacOS에선 contextmenu 이벤트로 해석
따라서 모든 사용자가 운영체제 종류에 상관없이 동일한 경험을 하게 하려면 ctrlKey 프로퍼티를 사용하는 코드엔 metaKey도 함께 넣어야한다.
if (event.ctrlKey || event.metaKey)같이
clientX, clientY와 pageX, pageY
간단히 client는 현재 client가 보는 기준의 브라우저의 좌표이고 page는 해당 html전체를 기준으로한 좌표이다.
즉, clientX와 clientY는 페이지가 스크롤 되어도 변하지 않습니다. 반면 pageX와 pageY는 페이지를 스크롤하면 값도 변합니다. (html전체기준에선 좌표값이 바뀌기때문)
더블클릭시 글자 선택 이벤트 막기
mousedown 이벤트가 발생하면 브라우저 기본 동작 때문에 글자가 선택됩니다. 이런 기본 동작이 사용자 경험을 해친다면 기본동작을 막아서 문제를 해결할 수 있습니다.
해결방법 :
onmousedown="return false"
복사막기
해결방법 :
oncopy="return false"
출처
4개의 댓글
다음 이벤트들의 구체적인 내용은 mdn 에서 확인하였습니다.
click : 클릭 한 후 -> Pointing Device Button 이 Element 안에서 pressed and released 되었을 때
dbclick : 연속으로 빠르게 클릭
contextmenu : 유저가 Context Menu 를 열고자 할 때 발생함
보통 마우스 우클릭을 하거나, context menu key 를 눌렀을 때 발생함.
그런데 MacOS는 Ctrl 키와 마우스 왼쪽 버튼을 함께 누른 경우 마우스 오른쪽 버튼을 누른 것으로 해석하기 때문에 문제가 발생 Windows, Linux에선 click 이벤트로 해석될 수 있는 동작이 MacOS에선 contextmenu 이벤트로 해석
mac os 가 ctrl 과 좌클릭을 같이하면 contextmenu 이벤트가 발생하는 군요
잘 읽었습니다!
mousedown이벤트가 마우스 오른쪽 버튼을 눌렀을 때도 작동이 되네요!mouseup이벤트 처럼 모든 버튼에 해당하나봐요. 저희 과제 주제 링크였던 https://ko.javascript.info/mouse-events-basics#ref-134 에서도 눌러보며 테스트가능합니다!button프로퍼티의 코드도 잘 봤습니다. 제 과제물 보충 때 인용하고 출처남길게요