JQueryでマウスの位置を使用してクリックイベントを設定する

Question

要素内の特定の座標にクリック機能をどのように割り当てることができますか？

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

Answer 2

要素の一部だけをクリックに反応させたい場合（これはあなたの質問の読み方です）は、クリックがどこで発生したのかを調べることで実現できます。

例：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関数は要素のためにあなたを与えるものです文書座標、です。だから、要素へevent.pageXとevent.pageYは、単にevent.pageYからevent.pageXからpos.leftとpos.topを差し引くことにより座標変換することができます。（。。それはpositionをだ奇妙なしかし、真の名前にもかかわらず、offsetあなたは、要素のオフセット親に対してオフセット与えるものではありません）。

Answer 3

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 4

ライブ例AlecTMHは、上述したようにhttp://jsfiddle.net/LBKTe/1

基本的には同じこと。

// 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 5

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

Answer 6

「関心のある分野」のほんの数があります場合は、必要なサイズの一個の以上の空の要素を重ね合わせて全体の要素の上でマウスクリックをキャプチャ避けることができます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> 

を参照してください