본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.
예제풀이
여러 페이지를 이용하다보면 우클릭 시에
"오른쪽 마우스는 사용할 수 없습니다" 이런 식의 메세지를 본적이 있을것이다.
간단한 자바스크립트 소스코드 몇줄로도 가능하다.
event.keyCode / event.srcElement / event.button ...등등이 있는데
이 중 event.button이 바로 마우스 동작 관련한 속성이다.
만약 왼쪽 클릭을 하였을 경우 0 을 반환하고
휠을 눌렀을 경우에는 1
오른쪽 클릭을 하였을 때는 2를 반환하게 된다.
예제코드이다.
1 2 3 | <body> <img alt="" src="../images/item01.gif"> </body> | cs |
<body>
간단하게 img태그를 이용하여 링크를 걸어준다. 작성할 페이지는
마우스 이벤트에 따라 그림이 추가되거나, 삭제되거나, 전체삭제된다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script> document.onmousedown = function() { if (event.button == 0) { //왼 document.title = event.clientX + ", " + event.clientY; var img = document.createElement("img"); img.src = "../images/item0" + getRandomInt(1, 9) + ".gif"; img.style.position = "absolute"; img.style.left = (event.clientX - 50) + "px"; // ***반드시 단위붙여야함 img.style.top = (event.clientY - 50) + "px"; img.className = "xx"; document.body.appendChild(img); } else if (event.button == 1) { //휠 var j = document.images.length; for (var i = 0; i <= j; i++) { document.body.removeChild(document.images[0]); } } else if (event.button == 2) {//오른쪽 if (event.srcElement.className == "xx") document.body.removeChild(event.srcElement); } } function getRandomInt(min, max) { //내가 원하는 범위의 숫자를 무작위로 얻을수 있다는 함수 return Math.floor(Math.random() * (max - min + 1) + min); } document.oncontextmenu = function() {//우클릭했을때 나타나는 메뉴 이벤트처리 return false; } </script> | cs |
<script>
조건문을 통하여 동작하도록 하였다.
event.button을 한 반환값이 0, 1, 2 일경우 나눠서 작동하게하였다.
마우스 왼쪽클릭을 하였을때는, 랜덤함수를 이용하여 item01~09까지 이미지를 추가하도록 하였고
휠을 눌렀을 경우에는 removeChild를 이용하여 모든 이미지를 삭제하도록 하였다.
우클릭을 했을 경우에는 해당 이미지가 삭제되도록 하였다.
getRandomInt() :
자신이 원하는 범위의 숫자를 무작위로 얻을 수 있는 함수 이다.
Math.random()을 이용하였다.
※ document.oncontextmenu란?
마우스 우클릭 했을 때 나오는 메뉴를 contextmenu라고 한다.
즉, 이 속성을 이용하여 마우스 우클릭했을 때 메뉴가 나오지 않도록 할 수 있다.
<실행결과>
'이전 글 > JavaScript' 카테고리의 다른 글
| 22. JavaScript. scrollHeight/clientHeight/offsetHeight (0) | 2018.01.21 |
|---|---|
| 21. JavaScript. setTimeout/setInterval (0) | 2018.01.21 |
| 19. JavaScript Ex.18 맨 위로 가기(TOP)/상단바 고정 (0) | 2018.01.21 |
| 18. JavaScript Ex.17 div, span 태그 펼치기/접기 (0) | 2018.01.21 |
| 17. JavaScript Ex.16 DOM(Document Object Model)-2 (0) | 2018.01.18 |
