在JQuery中使用鼠標位置設置點擊事件

任何人都可以告訴我如何將點擊功能分配給元素中的特定座標嗎？在JQuery中使用鼠標位置設置點擊事件

2012-05-14 Christopher Camplin

可能的重複http://stackoverflow.com/questions/2845178/triggering-a-javascript-click-event-at-specific-coordinates –

不是重複的 - 如果我正確理解他，OP想要_register_一個特定位置的處理程序，而不是假的事件。 – Alnitak

用什麼粒度 - 一個矩形，一個像素，其他的東西？ – Alnitak

$(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-14 09:00:59 Supericy

這似乎工作正常，但有沒有辦法輕鬆定義可點擊區域的小寬度和高度？定義可點擊區域的位置有一些幫助嗎？ –

您可以使用Jquery的$（...）。offset（）方法來獲取元素的絕對x和y。所以像左= $（elm）.offset（）。left，top = $（elm）.offset（）。top;然後爲邊界框的其他邊添加所需的寬度和高度。 – Supericy

那會是if語句嗎？ –

如果您只想讓部分元素響應點擊（這是我如何閱讀您的問題），您可以通過查看點擊發生的位置來做到這一點。

例如：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。

來源

2012-05-14 08:57:21

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-14 08:58:19 AlecTMH

直播例如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-14 08:59:10

你好演示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-14 09:00:48

如果僅僅有少數的「感興趣的領域」，你能避免整個元素上捕捉鼠標點擊通過疊加所需大小的一個或多個空元素用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-14 09:04:43 Alnitak

不幸的是，我需要那裏沒有點擊功能的元素，否則它會中斷其他功能，謝謝你的幫助。 –

在JQuery中使用鼠標位置設置點擊事件

回答

相關問題