HTML onmousedown 이벤트를 사용해 JavaScript 함수를 호출해 div 태그 영역을 마우스로 클릭했을 때 각각의 다른 이미지가 나오도록 간단히 작성한 소스 코드입니다. 소스 기능에 포함하지는 않았지만 event.button 3은 마우스 뒤로가기 event.button 4는 앞으로 가기 버튼을 클릭했을 때도 제어를 할 수 있습니다.
<html>
<head>
<title>마우스 왼쪽 클릭 마우스 휠 클릭 마우스 오른쪽 클릭할때마다 이미지 생기는 소스</title>
<meta name="generator" content="notepad" />
<meta name="author" content="zzarungna" />
<style>
.maindiv{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
function Test() {
//event.button 0 = 마우스 왼쪽 클릭 | event.button 1 = 마우스 휠 클릭 | event.button 2 = 마우스 오른쪽 버튼 클릭 | event.button 3 = 마우스 뒤로가기 버튼 | event.button 4 = 마우스 앞으로 가기 버튼
if (event.button == 0) {
var img = "<img src='https://static.wikia.nocookie.net/mycun-the-movie/images/c/c9/Bob_%28Despicable_Me%29.png/revision/latest?cb=20230509144510' style='position:absolute; left:" + (event.x - 64) + "px; top:" + (event.y - 64) + "px;' />";
document.body.innerHTML = document.body.innerHTML + img;
}else if(event.button == 1) {
var img = "<img src='https://static.wikia.nocookie.net/despicableme/images/4/47/MTROG_Stuart.png/revision/latest?cb=20220101205245' style='position:absolute; left:" + (event.x - 64) + "px; top:" + (event.y - 64) + "px;' />";
document.body.innerHTML = document.body.innerHTML + img;
}else if(event.button == 2){
var img = "<img src='https://static.wikia.nocookie.net/despicableme/images/9/9d/Kevin_%28Despicable_Me_2-Minions%29.png/revision/latest?cb=20230110213923' style='position:absolute; left:" + (event.x - 64) + "px; top:" + (event.y - 64) + "px;' />";
document.body.innerHTML = document.body.innerHTML + img;
}
}
</script>
</head>
<body>
<div onmousedown="Test();" class="maindiv">
</div>
</body>
</html>
해당 소스 코드의 결과 화면입니다. div 영역에서 마우스로 클릭할때마다 이미지가 생성 되게 만들어 보았습니다.
이번 소스 코드에서 재밌는 부분은 마우스 클릭 이벤트의 세부 동작을 JavaScript의 event.button 객체를 이용해 마우스 클릭 동작을 세부적으로 나누며 조절할 수 있는 특징이 있었던 것 같습니다. JavaScript 마우스 클릭 이벤트와 관련해 간단한 예제를 만들어 보았으니 필요하신 분들은 복사해서 활용하시면 될 것 같습니다.