2

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

4

6 回答 6

1

Hiya演示 http://jsfiddle.net/gYkXS/3/

希望这会有所帮助，祝你好运！干杯！

代码

$(document).ready(function(){
   $("#foo").mousemove(function(e){
      window.xPos = e.pageX;
      window.yPos = e.pageY;
       alert("Position X = " + e.pageX + "Position y = " + e.pageY);
   }); 
});​
于 2012-05-14T09:00:48.403 回答
1 
$(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
    }
});
于 2012-05-14T09:00:59.687 回答
0

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

示例：Live Copy | 资源

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. 奇怪但真实。）所以你可以通过简单地减去from和from来转换event.pageX和到元素坐标。event.pageYpos.leftevent.pageXpos.topevent.pageY

于 2012-05-14T08:57:21.223 回答
0

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是页面坐标，如果您需要元素内的相对坐标，则需要获取该元素在页面上的位置，然后根据元素位置计算实际坐标。

于 2012-05-14T08:58:19.627 回答
0

现场示例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!');            
    }
});
于 2012-05-14T08:59:10.710 回答
0

如果只有少量“感兴趣的区域”，您可以通过将一个或多个具有所需大小的空元素与position: absolutestyle 和 high叠加来避免捕获整个元素上的鼠标点击z-index，即：

.hotspot {
    position: absolute;
    z-index: 1000;
    cursor: pointer;
    cursor: hand;
}

div {
    position: relative;
}

canvas {
    background-color: #f0f0f0;
}
​
<div class="frame">
    <canvas width="400" height="400"> </canvas>
    <div class="hotspot" style="left: 100px; top: 100px; width: 40px; height: 40px">
    </div>
</div>

见http://jsfiddle.net/VUx2G/2/

于 2012-05-14T09:04:43.293 回答