從鼠標中捕捉X Y座標點擊（javascript）

我知道這應該是問一個問題，得到一個答案（我認爲我正在這樣做，只是不清楚我的清晰度水平）。我被要求找到一種從鼠標點擊捕獲xy座標的方法，然後將它們存儲在數據庫中。我想知道的是，如果一個人使用臺式機，平板電腦和智能手機點擊同一個地方，xy是否會相同？我想我要問的原因是我的直覺是他們不會是一樣的。如果是這樣的話，那麼我怎麼在將它們從數據庫中拉出來的時候精確映射所有鼠標點擊的位置。我希望我在這裏有意義（不太確定我自己）。從鼠標中捕捉X Y座標點擊（javascript）

謝謝大家！

來源

2015-03-31 slopes

聽起來像你不僅想要記錄鼠標的x，y，而且還需要瀏覽器的用戶代理;） – RenaissanceProgrammer 2015-03-31 21:45:07

我不認爲每個設備將有相同的xy協調網頁的特定點。如果是這樣的話，即使沒有響應式的UI設計本身，每個Web應該在所有設備上均勻顯示。因此，從一臺設備中保存xy座標不會是理想的情況，但您可以採取另一種方式，比如保存xy座標和屏幕分辨率。因此，相同的分辨率設備將具有相同的xy座標

來源

2015-03-31 21:54:08 Binu

實際上這是真的。在我的回答中，我只是猜測，有某種響應式設計或如此使用。如果這對你很好，我會加上你的觀點。 – wawa 2015-03-31 22:02:27

感謝所有迄今爲止的評論。聽起來這將是更復雜的問題來解決。以智能手機爲例，我假設x，y會隨總頁面大小而最大化，並且您向上或向下滾動不會影響x，y是什麼？再次感謝 – slopes 2015-04-01 14:46:17

感謝大家對我的準問題的幫助:)。我必須對這個問題做更多的考慮，以確定它是否值得繼續研究。 – slopes 2015-04-01 20:13:55

當您獲得點擊（mousedown或touchdown，什麼是）事件的X/Y線時，它們以屏幕左側和頂部的像素爲單位。

由於手機，平板電腦，筆記本電腦和臺式機沒有相同的分辨率，所以它們的座標不同。你可以做的是將其轉換爲％......假設你有一個圖片，你希望用戶能夠標記的人......那麼你可以只保存座標％這樣的：

x: 35%, y: 60% 

1920x1080 => x: 672px (1920/100*35), y = 648px (1080/100*60) 
600x400 => x: 210px (600/100*35), y = 240px (400/100*60) 
...

這就是我想要的。

編輯
作爲@Binoy指出，相同的X/Y座標將是任何設備上是相同的。但在移動設備上，您可能必須滾動，因爲該點位於視口之外。在我的回答中，我猜測，存在某種響應式佈局（如CSS max-width: 100%的圖像），並且用戶正在點擊該佈局。

來源

2015-03-31 21:50:29 wawa

從鼠標中捕捉X Y座標點擊（javascript）

回答

相關問題