在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功能爲您提供的元素。 （儘管名字，offset不給你的偏移量相對於元素的偏移父母;這是position奇怪但卻真實。）所以你可以翻譯event.pageX和event.pageY至元素座標通過簡單地從event.pageY減去event.pageXpos.left和pos.top。

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

直播例如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 5

你好演示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> 

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