2 Cara Memperoleh Koordinat Klik Mouse Pada Elemen Dengan JQuery

Menggunakan getBoundingClientRect()

Koordinat mouse setiap klik dapat diperoleh dengan mendeteksi klik saat mousedown setelah kita akan mendapatkan posisi X dan posisi Y.

Sebuah fungsi dibuat dengan mengambil element <img> dan event sebagai parameter. Dimensi <img> ditemukan dengan menggunakan fungsi getBoundingClientRect(). Metode ini mengembalikan ukuran elemen dan posisinya relatif ke viewport.

Posisi koordinat x dan y dari klik mouse diperoleh dengan mengurangi posisi X dengan posisi Y menggunakan Bounding Rectangle (persegi panjang pembatas). Posisi koordinat X diperoleh dengan menggunakan properti clientX dikurangi oleh rect.left(). Samahalnya dengan posisi koordinat Y.

Pengurangan ini akan menyesuaikan dengan posisi <img> pada halaman page karena posisi X dan Y relatif terhadap halaman dan bukan <img>

Untuk mendeteksi klik, elemen <img> pertama kali dipilih menggunakan metode querySelector(). Metode mousedown digunakan untuk run sebuah event atau function lain.

Posisi Koordinat X dan Y Saat Mouse Klik

Contoh;

<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<head> 
 <title> 
  How to get the coordinates of a mouse 
  click on a canvas element? 
 </title> 
</head> 

<body> 
 <img class="imgClick" style="width:800px;height:535px;" src="timnas indonesia.jpg" />

 <script type="text/javascript"> 
  var scrollPosition = 0;
 var lastRow=0;
 var x=0;
 var y =0;
 
 //CARA 1
 function getMousePosition(canvas, event) { 
    let rect = canvas.getBoundingClientRect();
    x = event.clientX - rect.left; 
    y = event.clientY - rect.top; 
    console.log("Coordinate x: " + x,  
       "Coordinate y: " + y); 
   } 
  
 let Element = document.querySelector("img"); 
 
 $('.imgClick').mousedown(function(e) {
  getMousePosition(Element, e);
  addLabel(x,y);
 });
 
 function addLabel(x,y) {
  var target = $(document.body);
        $('<div style="border-radius: 50%;width:10px;height:10px;background-color:red;position:absolute"></div>').css({
            top: y + "px",
            left: x + "px",
        }).appendTo(target);
 }
 </script> 
</body> 
</html>

Menggunakan Windows ScrollTop()

Jika posisi koordinat X dan Y hanya menggunakan clientX dan clientY maka posisi koordinat Y akan tidak akurat. Oleh karena itu butuh ScrollTop() jika ada perubahan zoom.

Contoh:


<!DOCTYPE html> 
<html> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<head> 
 <title> 
  How to get the coordinates of a mouse 
  click on a canvas element? 
 </title> 
</head> 

<body> 
 <img class="imgClick" style="width:800px;height:535px;" src="timnas indonesia.jpg" />

 <script type="text/javascript"> 
  var scrollPosition = 0;
  var lastRow=0;
  var x=0;
  var y =0;
  
  function addLabel(x,y) {
   var target = $(document.body);
   $('<div style="border-radius: 50%;width:10px;height:10px;background-color:red;position:absolute"></div>').css({
    top: y + "px",
    left: x + "px",
   }).appendTo(target);
  }
  //CARA 2
  $(window).scroll(function (e) {
   scrollPosition = $(this).scrollTop(); 
  });
  
  $('.imgClick').click(function (e) {
   x = e.clientX
   y = e.clientY + parseFloat(scrollPosition)
   console.log("Coordinate x: " + x,  
        "Coordinate y: " + y); 
   addLabel(x,y);
  });

 </script> 
</body> 
</html>