获取用户点击的图像部分

Question

是否可以找到用户点击图像的位置？

我有一个图像 - 用户可以单击该图像。我正在尝试找到一种方法，当用户点击时如何到达该位置。

Answer 1

单击图像时，您可以使用事件对象找到用户单击的坐标。

$("imageSelector").click(function(e){
  var pos = $(this).position();
  //The following are the x/y coordinates of the mouse click relative to image.
  var x = e.pageX - pos.left;
  var y = e.pageY - pos.top;
});

Answer 2

不要被未考虑边距、填充和边框的方法所愚弄！

这是您需要的代码。 :

$("#myImage").click ( function (evt) {

    var jThis               = $(this);
    var offsetFromParent    = jThis.position ();
    var topThickness        = (jThis.outerHeight(true) - jThis.height() ) / 2;
    var leftThickness       = (jThis.outerWidth (true) - jThis.width () ) / 2;

    //--- (x,y) coordinates of the mouse click relative to the image.
    var x                   = evt.pageX - offsetFromParent.left - leftThickness;
    var y                   = evt.pageY - offsetFromParent.top  - topThickness;
} );

在 jsFiddle 上查看它的实际情况。

Answer 3

您可以轻松获取鼠标位置，然后可以向该点相对于图像添加一些内容。

以下是鼠标位置的示例：jquery.com