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;
} );

See it in action at jsFiddle.

Answer 3

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

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

获取用户单击的图像部分

3 个答案: