如何使用 jQuery 取得相對於目標元素的準確滑鼠點擊座標？
- Mary-Kate Olsen原創
- 2024-12-05 22:51:14637瀏覽
使用jQuery 了解目標元素上的滑鼠點擊座標
使用jQuery 處理HTML 元素上的點擊事件時，了解如何準確地擷取滑鼠座標至關重要相對於目標元素的指標。讓我們透過詳細的範例來探討和闡明這個主題。
問題診斷
考慮以下事件處理程序：
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
目標是取得滑鼠指標相對於點擊時的#seek-bar 元素。但是，提供的程式碼可能會產生不正確的結果。
了解位置屬性
1. event.pageX, event.pageY:
這些屬性提供滑鼠指標相對於整個文件的座標。
參考： http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset():
此函數傳回元素在其包含文件中的偏移位置（距頁面左上角的距離）。
參考： http://api.jquery.com/offset/
3. position():
3. position()
:此函數傳回元素在其包含文件中的位置（相對於其父元素）。
參考： http://api .jquery.com/position/要解決最初的問題，考慮這些位置屬性及其預期用途至關重要。在這種情況下，要取得滑鼠指標相對於 #seek-bar 的位置，我們應該使用 offset()
函數而不是offsetLeft。
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});已修正的程式碼：
範例示範為了說明這些位置屬性之間的差異，這裡有一個範例HTML 程式碼段和對應的JavaScript程式碼：
<body> <div>HTML
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});JavaScript透過點擊這些div，您可以根據所使用的位置屬性觀察不同的結果。 以上是如何使用 jQuery 取得相對於目標元素的準確滑鼠點擊座標？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn