고정 헤더 영역
 |
 |
 |
 |
 |
 |
 |
상세 컨텐츠
본문
반응형
웹사이트 내에서 마우스클릭 이벤트가 발생한 경우에
마우스클릭위치를 알아내는 방법입니다
<!DOCTYPE html>
<html>
<body>
<h2 onclick="showCoords(event)">이부분을 클릭하면 클릭된 위치의 X좌표와 Y좌표를 표시합니다</h2>
<input type = "button" value = "버튼의 여러부분을 클릭해보세요" OnClick = "javascript:showCoords(event)"
style="width:300px;height:70px"
>
<p id="demo"></p>
<script>
function showCoords(event) {
var x = event.clientX;
var y = event.clientY;
var coords = "X coords: " + x + ", Y coords: " + y;
document.getElementById("demo").innerHTML = coords;
}
</script>
</body>
</html>
위와같이 하면 <h2>태그나 <input> 태그를 클릭할 경우, 클릭된 위치의 X좌표와 Y좌표값을 알 수 있습니다.
아울러, 클릭된 태그(엘리먼트)의 종류를 알아내려면 다음과 같이 하면 된다
function showCoords(event) {
var targ;
if (!e) {
var e = window.event;
}
if (e.target) {
targ=e.target;
} else if (e.srcElement) {
targ=e.srcElement;
}
var tname;
tname = targ.tagName;
alert("지금 클릭된 태그명은" + tname + " 입니다 ");
}
반응형
'IT공부방 > jQuery, ajax, java' 카테고리의 다른 글
| 일정시간 간격으로 이미지 변환,전환 시키기 javascript setTimeout, setInterval, clearTimeout (3) | 2018.12.13 |
|---|---|
| 인트로페이지 로딩 , 부드럽게 열리는 이미지 만들기 jquery (0) | 2018.10.30 |
| jquery barcode 출력 (바코드출력) 하기, jquery공개소스 (0) | 2018.03.20 |
| 360도 이미지를 볼 수있는 jQuery 소스 (VR 파노라마뷰어, 이미지뷰어) (20) | 2017.08.05 |
| javascript: url 에서 경로 / 파일명 / 확장자 분리하기... 추출하기 split()함수 (0) | 2017.01.02 |
댓글 영역