將鼠標座標保存在數組中

我想在數組中獲取鼠標座標。此外，我點擊任何地方我無法獲得鼠標座標。將鼠標座標保存在數組中

<!DOCTYPE html> 
    <html> 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps</title> 
    <style>body {background-color: ivory;}</style> 
    </head> 
    <body> 
    <p id="results">result</p> 
    <script> 
    var x = document.getElementById("body"); 
    var offsetX = x.offsetLeft; 
    var offsetY = x.offsetTop; 
    x.addEventListener('click', handleClick, false); 
    function handleClick(e) { 
     mouseX = parseInt(e.clientX - offsetX); 
     mouseY = parseInt(e.clientY - offsetY); 
     document.getElementById("results").innerHTML = "You clicked at: " + mouseX + "/" + mouseY; 
    } 
    </script> 
    </body> 
</html>

來源

2016-04-28 Fatih Doğan

有什麼具體的問題嗎？不知道我理解你的問題（如果有的話） – ochi

你的HTML中沒有'id =「body」'的元素。 –

而這與jQuery有什麼關係？看起來像香草JavaScript給我.... –

您的HTML中沒有包含id="body"的元素。您可以使用document.body訪問<body>元素。

而且，身體是相當小的，因爲它只包含你的一個<p>元素，所以你可能要添加一些CSS，這樣就可以在窗口中點擊任何地方，你的活動將火：

html, body { 
    height: 100%; 
}

要在存儲陣列中的計算座標，只需創建一個空白的陣列：

var coords = [];

然後座標添加到他們：

coords.push([mouseX, mouseY]);

這裏是一個工作示例：

var x = document.body; 
 
var offsetX = x.offsetLeft; 
 
var offsetY = x.offsetTop; 
 
x.addEventListener('click', handleClick, false); 
 

 
var coords = []; 
 

 
function handleClick(e) { 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 
    coords.push([mouseX, mouseY]); 
 
    document.getElementById("results").innerHTML = "You have clicked at: " + JSON.stringify(coords); 
 
}

html, body { 
 
    height: 100%; 
 
}

<p id="results">result</p>

來源

2016-04-28 20:49:41

沒有工作。我想將單擊的座標保存在數組中。 –

這將是我如何處理它。

你沒有元素與body的id所以我創建了一個與bodyEquivalent

如果你想獲得一個實際的標籤，你需要使用 getElementsByTagName('tag_name');返回匹配的元素的數組（您的ID可以抓住從陣列的第一個元素）

或更簡單地說：document.body爲body標籤

var x = document.getElementById("bodyEquivalent"); 
 
// or 
 
// var x = document.body; 
 

 
var offsetX = x.offsetLeft; 
 
var offsetY = x.offsetTop; 
 
x.addEventListener('click', handleClick, false); 
 

 
// array to store click coords 
 
var clickCoords = []; 
 

 
// a point coord 
 
var ClickPoint = function(x, y) { 
 
    this.x = x; 
 
    this.y = y; 
 
}; 
 

 
ClickPoint.prototype.toString = function(){ 
 
    return "(" + this.x + ", " + this.y + ")"; 
 
} 
 

 
function handleClick(e) { 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 

 
    // create click point and store it in array 
 
    var aClick = new ClickPoint(mouseX, mouseY); 
 
    clickCoords.push(aClick); 
 

 
    // update results 
 
    showArrayCoords(clickCoords); 
 
} 
 

 
function showArrayCoords(coords) { 
 
    var innerHtml = 'You clicked at:<br/>'; 
 
    for (i = 0; i < coords.length; i++) { 
 
    innerHtml += coords[i] + "<br/>"; 
 
    } 
 
    document.getElementById("results").innerHTML = innerHtml; 
 
}

#bodyEquivalent { 
 
    background-color: ivory; 
 
    border: 1px solid black; 
 
    width: 400px; 
 
    height: 300px; 
 
}

<div id="bodyEquivalent"> 
 
</div> 
 
<p id="results">result</p>

來源

2016-04-28 20:54:58 ochi

將鼠標座標保存在數組中

回答

相關問題