Определите левое смещение щелчка с помощью jQuery

Question

Скажите, что у вас есть изображение шириной 200 пикселей. Есть ли способ определить, насколько далеко от левой части изображения вы нажали? Например, если вы нажали в мертвой точке, вы получите 100. Я попытался использовать что-то вроде ui.position.left, но не смог заставить это работать. Есть идеи?

Answer 1

Во-первых, получите положение X изображения. Затем используйте информацию о событии, чтобы получить X-позицию события click.

После того, как у вас есть эти два, это простая математика, чтобы получить результат:

$('#yourImg').click(function(e){ 
    var imageLeft = $(this).offset().left; 
    var clickLeft = e.pageX; 
    var howFarFromLeft = clickLeft - imageLeft; 
}); 

Answer 2

Вам нужно найти координаты мыши в момент щелчка (, используя событие щелчка, event.pageX, event.pageY). Затем найдите местоположение изображения в теле. и вычесть его из mouseposition ..

В результате будет координаты внутри изображения .. Demo