Как найти координаты click'а?

298

15 января 2017, 18:08

Работаю с svg.

Надо найти координаты клика на svg.

Получаю координаты так:

$('svg').mousedown(function(e) {
    var x = e.originalEvent.layerX,
        y = e.originalEvent.layerY;
    ...

Проблема в том, что на svg присутствуют image, а работа с ними отличается в FF и Chrome. При клике на image:

Chrome считает layerX от начала svg
FF считает LayerX от начала image

как получить координаты от начала svg в обоих случаях?

Answer 1

e.clientX и e.clientY.

var svg = document.querySelector('svg'); 
 
svg.addEventListener('click', function(e) { 
  var x = e.clientX, 
  y = e.clientY; 
   
  alert("x: " + x + " y:" + y); 
});

body { 
  background: #afb7f0; 
} 
svg { 
  position: absolute; 
  top: 50px; 
  left: 50px; 
  background-color: #fff; 
}

<div> 
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"> 
    <image id="image" xlink:href="http://jsfiddle.net/img/logo.png" x="20" y="20" height="32px" width="45px" /> 
  </svg> 
</div>

Answer 2

РЕШЕНО

правильно оказалось так:

$('svg').mousedown(function(e) {
    var svg = document.querySelector('svg'),
        bcr = svg.getBoundingClientRect(),
        x = e.clienX - bcr.left,
        y = e.clientY - bcr.top;
    ...