Question

有谁能告诉我如何将点击功能分配给元素中的特定坐标？

Answer 1

希望这会有所帮助，有一个好的！干杯！

<强>码

$(document).ready(function(){
   $("#foo").mousemove(function(e){
      window.xPos = e.pageX;
      window.yPos = e.pageY;
       alert("Position X = " + e.pageX + "Position y = " + e.pageY);
   }); 
});

Answer 2

$(document).click(function(event) {
    var top = 0,
        right = 200,
        bottom = 200,
        left = 0;


    var x = event.pageX;
    var y = event.pageY;
    if ((x >= left && x <= right) && (y >= top && y <= bottom))
    {
        // do stuff if within the rectangle
    }
});

Answer 3

如果您只想要部分元素响应点击（这是我阅读您的问题的方式），您可以通过查看点击发生的位置来做到这一点。

示例：live copy | source

jQuery(function($) {

  $("#target").click(function(event) {
      var $this = $(this),
          width = $this.width(),
          pos = $this.offset(),
          x = event.pageX - pos.left,
          y = event.pageY - pos.top;

      display("Click was at (" + x + "," + y + ") in the element");
      if (x > (width / 2)) {
          display("Clicked in the right half");
      }
  });


  function display(msg) {
    $("<p>").html(msg).appendTo(document.body);
  }
});

event.pageX和event.pageY是文档坐标，这是offset函数为您提供的元素。（尽管有名称，offset没有给出相对于元素的偏移父项的偏移量;那是position。奇怪但真实。）因此，您可以翻译event.pageX和event.pageY通过简单地从pos.left中减去event.pageX和从pos.top减去event.pageY来获取元素坐标。

Answer 4

jquery中的每个事件都有pageX和pageY属性。因此，如果您触发事件，则可以检查坐标：

$('#elem').click(function(e)) {
    var x = e.pageX;
    var y = e.pageY;
    if (x > x1 && x < x2 && y > y1 && y < y2) {
         do_something
    }
}

在这种情况下，x1，x2，y1，y2是矩形的坐标。

pageX，pageY是页面坐标，如果您需要元素中的相对元素，则需要在页面上获取元素的位置，然后根据元素位置计算实际坐标。

Answer 5

实例http://jsfiddle.net/LBKTe/1

与上述AlecTMH基本相同。

// top left and botom right corners of the clickable area
var x1 = 10, x2 = 30, y1 = 10, y2 = 30;
$(document).on('click', '#block', function(e) {
    // get x/y coordinates inside    
    var cx = e.clientX;
    var cy = e.clientY;
    offset = $(this).offset();
    x = cx-offset.left;
    y = cy-offset.top;

    // if our click coordinates are within constrains, show an alert
    if (x >= x1 && x <= x2 && y >= y1 && y <= y2) {
      alert('click!');            
    }
});

Answer 6

如果只有少量的“感兴趣区域”，则可以通过将position: absolute样式和高{{1}叠加到所需大小的一个或多个空元素来避免捕获整个元素上的鼠标点击，即：

z-index

请参阅http://jsfiddle.net/VUx2G/2/

使用JQuery中的鼠标位置设置单击事件

6 个答案: