728x90
반응형
전체 화면에서 사용자가 클릭 또는 터치한 위치 좌표를 구하기는 비교적 간단하다.
$("#photo").on("touchstart", function(e){
clientX = e.originalEvent.touches[0].clientX;
clientY = e.originalEvent.touches[0].clientY;
}
특정 엘리먼트 내 좌표를 구하는 방법은 아래와 같다.
$("#frame").on("touchstart", function(e){
//페이지 내에서 터치한 이미지 위치 구하기
var br = document.getElementById("photo").getBoundingClientRect();
//이미지 내 터치한 x,y 좌표 구하기
clientX = e.originalEvent.touches[0].clientX - br.left;
clientY = e.originalEvent.touches[0].clientY - br.top;
});
위 예시화면 코드는 더보기 참조
더보기
<head>
<%@ include file="/WEB-INF/include/include-head.jspf" %>
<title>View Test Page</title>
<style>
i {
display: block;
height: 100%;
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: contain;
position: relative;
}
</style>
</head>
<body>
<h2>특정 엘리먼트 내 좌표값 구하기</h2>
<div style="display: flex;flex-direction: column;height: calc((var(--vh, 1vh) * 100) - 50px);">
<div style="display: contents;height: 0;">
<div style="margin: auto; width: 50%; height: 200px;">
<i id="photo" style="background-image:url(/images/ico3.png);"></i>
</div>
</div>
</div>
<%@ include file="/WEB-INF/include/include-footer.jspf" %>
</body>
</html>
728x90
반응형
'공부기록 > HTML,CSS,JS,JQUERY' 카테고리의 다른 글
| Fetch vs. Ajax 차이점 (0) | 2024.05.17 |
|---|---|
| [Violation] Added non-passive event listener to a scroll-blocking 'mousewheel' event. 해결하기. (0) | 2024.03.28 |
