2

要素内の特定の座標にクリック関数を割り当てる方法を教えてもらえますか？

4

6 に答える 6

1

ひやデモ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

要素の一部だけがクリックに応答するようにしたい場合（これが私があなたの質問を読む方法です）、クリックが発生した場所を調べることでそれを行うことができます。

例：ライブコピー| ソース

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.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

「関心のある領域」の数が少ない場合は、必要なサイズの1つ以上の空の要素をposition: absoluteスタイルと高さで重ね合わせることで、要素全体でのマウスクリックのキャプチャを回避できます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 に答える