jQuery와 JavaScript를 이용한 마우스 이벤트 처리 - 왼쪽 및 오른쪽 클릭 이벤트

"마우스 이벤트란 무엇인가?"

말그대로 기본적으로 마우스 우클릭과 좌클릭 이벤트를 말할 수 있으며 이번에는 해당 내용을 다뤄볼 생각이다.

그외 다양한 이벤트도 존재하지만 그것은 나중에 다시 언급하도록 하겠다.

 

우선적으로 마우스 클릭 이벤트 관련하여 우클릭과 좌클릭에 관한 명령어 용어는 Click Event와 Contextmenu Event가 존재한다.

 

jQuery를 활용한 마우스 이벤트 처리

 

jQuery를 활용한 왼쪽 좌클릭 이벤트

$(document).ready(function() {
    $("#elementId").click(function() {
        alert("왼쪽 클릭 이벤트 발생!");
    });
});

 

 

 

 jQuery를 활용한 오른쪽 우클릭 이벤트

$(document).ready(function() {
    $("#elementId").contextmenu(function(event) {
        event.preventDefault(); // 기본 컨텍스트 메뉴 방지
        alert("오른쪽 클릭 이벤트 발생!");
    });
});

 

 

---

JavaScript를 활용한 마우스 이벤트 처리

 

javaScript를 활용한 왼쪽 좌클릭 이벤트

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("elementId").addEventListener("click", function() {
        alert("왼쪽 클릭 이벤트 발생!");
    });
});

 

 

 

javaScript를 활용한 오른쪽 우클릭 이벤트

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("elementId").addEventListener("contextmenu", function(event) {
        event.preventDefault(); // 기본 컨텍스트 메뉴 방지
        alert("오른쪽 클릭 이벤트 발생!");
    });
});

 

---

여기서 추가적으로 특정 키 컨트롤와 같이 사용했을 때를 적용해볼려고 한다.

 

jQuery에서 컨트롤 + 왼쪽 (좌클릭) 이벤트

$(document).ready(function() {
    $("#elementId").click(function(event) {
        if (event.ctrlKey) {
            alert("컨트롤 키를 누른 상태에서 왼쪽 클릭 이벤트 발생!");
        }
    });
});

 

javaScript에서 컨트롤 + 왼쪽 (좌클릭) 이벤트

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("elementId").addEventListener("click", function(event) {
        if (event.ctrlKey) {
            alert("컨트롤 키를 누른 상태에서 왼쪽 클릭 이벤트 발생!");
        }
    });
});

 

jQuery에서 컨트롤 + 오른쪽 (우클릭) 이벤트

$(document).ready(function() {
    $("#elementId").contextmenu(function(event) {
        if (event.ctrlKey) {
            event.preventDefault(); // 기본 컨텍스트 메뉴 방지
            alert("컨트롤 키를 누른 상태에서 오른쪽 클릭 이벤트 발생!");
        }
    });
});

 

javaScript에서 컨트롤 + 오른쪽 (우클릭) 이벤트

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById("elementId").addEventListener("contextmenu", function(event) {
        if (event.ctrlKey) {
            event.preventDefault(); // 기본 컨텍스트 메뉴 방지
            alert("컨트롤 키를 누른 상태에서 오른쪽 클릭 이벤트 발생!");
        }
    });
});

 

해당 내용을 추가로 다룬 이유는 맥 OS에서는 컨트롤 + 왼쪽 (좌클릭) 이벤트를 활용 할 경우

오른쪽 (우클릭) 으로 인식하기 때문이다. 

 

해당 이슈 관련해서는OS의 기본 사용자 인터페이스 지침 중 하나이기 때문이라는데

결론적으로 해당 이슈로 인해 사이트를 제작할 경우 참고 해야할 것 같다.

 

해결 방안은 존재하지만, 결국 당사자만 해결이 되는 부분이지 사용자들 전체 해결되는 상황이 아니기 때문에 부적절하다고 본다.

 

클릭 이벤트 외 다른 마우스 이벤트들은

마우스 이동(mousemove), 드래그 앤 드롭(drag 및 drop), 더블 클릭(dblclick) 등이 존재하며,
해당 내용은 추후에 다뤄볼 생각이지만

결과적으로 조금만 생각을 해본다면 click event 대신 해당 이벤트 명칭을 사용한다면 무난히 적용되는걸 알 수 있을 것이다.