單元格的哪一側被點擊

我有一個表格「網格」，有多行，比方說50，還有多列，比如50，都是20px左右的正方形。用戶可以點擊並更改單元格顏色，這是相關的，因爲我認爲它需要保留一張表格。我想讓用戶沿着網格「繪製」線條。是否有可能檢測他們點擊或點擊最接近的單元格的哪一側？所以我可以將邊框設置爲x像素？單元格的哪一側被點擊

謝謝

來源

2012-02-06 maddogandnoriko

您可以通過獲取與文檔有關的鼠標座標和pageY 對象的屬性。

從那裏，您可以減去元素的offset()以獲取元素相對座標。然後你只需要比較一半的元素width()所產生的水平座標：

$("td").click(function(e) { 
    var $this = $(this); 
    if (e.pageX - $this.offset().left > $this.width()/2) { 
     // Clicked on the right side. 
    } else { 
     // Clicked on the left side. 
    } 
});

來源

2012-02-06 13:30:23

......我真不敢相信那麼簡單。太棒了。謝謝。 – maddogandnoriko 2012-02-06 13:43:27

優雅的解決方案！我想知道，我怎麼能檢測到點擊單元格的中間？ – Cory 2015-04-23 15:11:46

@Cory，你可以測試'e.pageX - $ this.offset（）。left == $ this.width（）/ 2'。不過，這看起來像是一個可用性惡夢。要求來自用戶的像素完美點擊通常不是一個好主意。 – 2015-04-23 15:13:32

看一看here。這個例子提供絕對座標。您必須通過做一些計算來確定哪個區域被點擊，以適應您的情況。

來源

2012-02-06 13:23:58 adarshr

捕獲鼠標指針的x和y座標並做一些簡單的數學運算是一件簡單的事情。例如：

$("td").mousemove(function(e) { 
    var xpos = e.pageX; 
    var ypos = e.pageY; 
    console.log(xpos + " " + ypos); 
    if(xpos < $(this).width()/2) { 
     console.log("somewhere left");  
    } else { 
     console.log("somewhere right"); 
    } 
});

Demo.

來源

2012-02-06 13:24:54 karim79

'event.pageX'和'event.pageY'是文檔相對。您必須將它們轉換爲代碼的元素相對座標才能獲得有意義的結果。 – 2012-02-06 13:28:06

太棒了...只是一些數學適用於我的網頁。謝謝！ – maddogandnoriko 2012-02-06 13:31:05

@FrédéricHamidi - 好點：S – karim79 2012-02-06 13:31:12

就可以解決這個類似：

找到（窗口）鼠標位置
找到單擊的單元格

相關的鼠標位置

來源

2012-02-06 13:26:15 Yorgo

單元格的哪一側被點擊

回答

相關問題