jQuery를 사용하여 이미지에서 마우스 클릭의 X/Y 좌표 가져오기

jQuery를 사용하여 이미지에서 마우스 클릭의 X/Y 좌표 가져오기

이 질문에는 이미 다음과 같은 답변이 있습니다.

j요소 내 마우스 위치 가져오기 (8개 답변)

닫힘7년 전에.

저는 jQuery를 사용하여 이미지에서 클릭 이벤트의 X/Y 좌표를 얻고 싶습니다.좌표는 전체 페이지가 아니라 이미지에 상대적이어야 합니다.

를 사용하여 창에서 마우스의 위치를 파악할 수 있습니다.jQuery's를 사용하여 요소의 위치를 얻을 수도 있습니다.

그래서, 그래야 합니다.pageX - offset.left이미지의 왼쪽에서 얼마나 멀리 그리고pageY - offset.top이미지 상단에서 얼마나 멀리 떨어져 있는지 확인합니다.

다음은 예입니다.

$(document).ready(function() {
  $('img').click(function(e) {
    var offset = $(this).offset();
    alert(e.pageX - offset.left);
    alert(e.pageY - offset.top);
  });
});

저는 여기서 실제 예시를 만들었고 여기가 출처입니다.

아래나 오른쪽에서 얼마나 멀리 떨어져 있는지 계산하려면 jQuery의 방법과 방법을 사용해야 합니다.

음! 사이에 차이가 있습니다.e.clientX&e.clientY그리고.e.pageX그리고.e.pageY

두 가지 방법을 모두 사용해 보고 적절한 방법을 사용하는지 확인합니다.clientX그리고.clientY스크롤 위치를 기준으로 변경

여기 더 나은 스크립트가 있습니다.

$('#mainimage').click(function(e)
{   
    var offset_t = $(this).offset().top - $(window).scrollTop();
    var offset_l = $(this).offset().left - $(window).scrollLeft();

    var left = Math.round( (e.clientX - offset_l) );
    var top = Math.round( (e.clientY - offset_t) );

    alert("Left: " + left + " Top: " + top);

});

아래 코드는 어떤 이미지가 윈도우를 스크롤하더라도 항상 작동합니다.

$(function() {
    $("#demo-box").click(function(e) {

      var offset = $(this).offset();
      var relativeX = (e.pageX - offset.left);
      var relativeY = (e.pageY - offset.top);

      alert("X: " + relativeX + "  Y: " + relativeY);

    });
});

참조: http://css-tricks.com/snippets/jquery/get-x-y-mouse-coordinates/

http://jsfiddle.net/TroyAlford/ZZEk8/ 에서 아래의 작동 예를 확인해 보십시오.

<img id='myImg' src='/my/img/link.gif' />

<script type="text/javascript">
    $(document).bind('click', function () {
        // Add a click-handler to the image.
        $('#myImg').bind('click', function (ev) {
            var $img = $(ev.target);

            var offset = $img.offset();
            var x = ev.clientX - offset.left;
            var y = ev.clientY - offset.top;

            alert('clicked at x: ' + x + ', y: ' + y);
        });
    });
</script>

위의 내용은 이미지 상자를 기준으로 x와 y를 얻을 수 있지만 마진, 테두리 및 패딩을 정확하게 고려하지는 않습니다.이러한 요소는 실제로는 이미지의 일부가 아니지만 고려해야 할 요소의 일부일 수도 있습니다.

이 경우에도 다음과 같은 방법을 사용해야 합니다.$div.outerWidth(true) - $div.width()그리고.$div.outerHeight(true) - $div.height()마진 / 테두리 / 등의 양을 계산합니다.

새 코드는 다음과 같습니다.

<img id='myImg' src='/my/img/link.gif' />

<script type="text/javascript">
    $(document).bind('click', function () {
        // Add a click-handler to the image.
        $('#myImg').bind('click', function (ev) {
            var $img = $(ev.target);

            var offset = $img.offset(); // Offset from the corner of the page.
            var xMargin = ($img.outerWidth() - $img.width()) / 2;
            var yMargin = ($img.outerHeight() - $img.height()) / 2;
            // Note that the above calculations assume your left margin is 
            // equal to your right margin, top to bottom, etc. and the same 
            // for borders.

            var x = (ev.clientX + xMargin) - offset.left;
            var y = (ev.clientY + yMargin) - offset.top;

            alert('clicked at x: ' + x + ', y: ' + y);
        });
    });
</script>

언급URL : https://stackoverflow.com/questions/2159044/getting-the-x-y-coordinates-of-a-mouse-click-on-an-image-with-jquery