๐ป๋ง์ฐ์ค ํด๋ฆญ ๋ฒํผ์ ๋ฐ๋ผ ๋ค๋ฅธ ์ด๋ฏธ์ง ์์ฑํ๊ธฐ๐ป
์ขํด๋ฆญ์ ํ๋ฉด rect_icon01.png, ์ฐํด๋ฆญ ํ๋ฉด rect_icon02.png, ํ ์ ํด๋ฆญํ๋ฉด ์ด๋ฏธ์ง๊ฐ ์ญ์ ๋๊ฒ ๊ตฌํ์ ํ ๊ฒ์ด๋ค.
์ด๋ฏธ ์ขํด๋ฆญ์ผ๋ก rect_icon01.png๊ฐ ์์ฑ๋์๋๋ผ๋ ์ฐํด๋ฆญํ๋ฉด rect_icon02.png์ผ๋ก ๋ฐ๋์ด์ผ ํ๋ค.
๊ธฐ๋ณธ ๋ผ๋
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#tbl1 {
border: 1px solid black;
border-collapse: collapse;
}
#tbl1 td {
border: 1px solid black;
width: 126px;
height: 126px;
}
#tbl1 td img {
display: block;
}
</style>
</head>
<body>
<h1>ํ
์ด๋ธ</h1>
<table id="tbl1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
์ด๋ฒคํธ
<script>
const list = document.querySelectorAll('#tbl1 td');
for (let i=0; i<list.length; i++) {
list[i].onmousedown = function() {
if (event.buttons == 1) { //์ขํด๋ฆญ
if(event.target.nodeName == 'TD') {
// ๋น์ด์๋ <td>
let img = document.createElement('img');
img.setAttribute('src', '../asset/images/rect_icon01.png');
event.target.appendChild(img);
} else {
// <img> ๊ธฐ๋ณธ ์ด๋ฏธ์ง ์ ๊ฑฐ
event.currentTarget.removeChild(event.currentTarget.firstElementChild);
let img = document.createElement('img');
img.setAttribute('src', '../asset/images/rect_icon01.png');
event.currentTarget.appendChild(img);
}
} else if (event.buttons == 2) { //์ฐํด๋ฆญ
if(event.target.nodeName == 'TD') {
let img = document.createElement('img');
img.setAttribute('src', '../asset/images/rect_icon02.png');
event.target.appendChild(img);
} else {
event.currentTarget.removeChild(event.currentTarget.firstElementChild);
let img = document.createElement('img');
img.setAttribute('src', '../asset/images/rect_icon02.png');
event.currentTarget.appendChild(img);
}
} else if (event.buttons == 4) { //ํ ํด๋ฆญ
// ํด๋ฆญํ ์ด๋ฏธ์ง๋ฅผ ์ญ์
// ๋ถ๋ชจํ๊ทธ.removeChild(์์ํ๊ทธ)
// event.target.parentElement.removeChild(event.target); //1๋ฒ
event.currentTarget.removeChild(event.currentTarget.firstElementChild); //2๋ฒ / 1๋ฒ๋ณด๋ค ์ฝ๋ ํ์ด ๋ ์ข๋ค.
}
};
}
//๋์ ์ผ๋ก oncontextmenu ์์ฑํ๊ธฐ
window.oncontextmenu = function() {
return false;
}
</script>ํด๋ฆญ์ผ๋ก td์์ img๊ฐ ์๊ธฐ๋ฉด์ ๋ด๊ฐ ์ ํํ ๊ฐ์ฒด๊ฐ td์ด๋ฉด ์์ง ํด๋ฆญ ์ ์ด๋ฏธ์ง๊ฐ ์์ฑ๋์ง์์ ์๋ก์ด ์ด๋ฏธ์ง๋ง ์์ฑํ๋ฉด ๋๊ณ , ๋ด๊ฐ ์ ํํ ๊ฐ์ฒด๊ฐ td๊ฐ ์๋๋ผ๋ฉด ์ด๋ฏธ ์ด๋ฏธ์ง๊ฐ ์กด์ฌํ๋ ๊ฒ์ผ๋ก ํด๋น ์ด๋ฏธ์ง๋ฅผ ์ญ์ ํ ์๋ก์ด ์ด๋ฏธ์ง๋ฅผ ์์ฑํ๋ค.
์ฃผ์ํ ์ ์, td์์ img๊ฐ ์๊ธฐ๋ฏ๋ก ์๋ก ์์ฑํ img๋ฅผ td์ ์ฐ๊ฒฐํ ๋๋ event.target์ด ์๋ event.currentTarget๋ฅผ ์ฌ์ฉํด์ค์ผ ํ๋ค.
๋์ ์ผ๋ก oncontextmenu ์์ฑํ๊ธฐ
<body oncontextmenu="return false;">ํ๊ทธ์ JavaScript๋ฅผ ๋ถ๋ฆฌํ๋ ์ถ์ธ์ด๋ฏ๋ก body์ ์ ์ธํ๋ ๊ฒ์ script ๋ถ๋ถ์ ์ฝ๋๋ฅผ ์์ฑํ๋ค.
window.oncontextmenu = function() {
return false;
}window์ ํ๋กํผํฐ๋ก ์ค์ ํ์ฌ ๋์ ์ผ๋ก ์์ฑํ๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ์๋ฐ์คํฌ๋ฆฝํธ๋ก css ์กฐ์ํ๊ธฐ (0) | 2023.10.12 |
|---|---|
| [JavaScript] ์ด๋ฒคํธ์ Hover Table(3) (0) | 2023.10.11 |
| [JavaScript] ์ด๋ฒคํธ ๋ฒ๋ธ๋ง, ์ด๋ฒคํธ ํฐ๋๋ง (0) | 2023.10.11 |
| [JavaScript]๋ฌธ์์ด ์กฐ์ : template (0) | 2023.10.11 |
| [JavaScript] ํจ์๋ 1๊ธ ๊ฐ์ฒด์ด๋ค. (0) | 2023.10.11 |
