js点击记录坐标并回到坐标位置
时间: 2023-09-12 12:07:57 浏览: 57
您可以通过在HTML文件中添加以下代码来记录鼠标点击位置并回到该位置:
```html
<!DOCTYPE html>
<html>
<head>
<title>Click and Go Back</title>
<script>
var xCoordinate;
var yCoordinate;
function recordClick(event) {
xCoordinate = event.clientX;
yCoordinate = event.clientY;
}
function goBack() {
window.scrollTo(xCoordinate, yCoordinate);
}
</script>
</head>
<body onclick="recordClick(event)">
<p>Click anywhere on the page to record the click coordinates.</p>
<button onclick="goBack()">Go back to the click location</button>
</body>
</html>
```
该代码会在页面上添加一个按钮,当用户单击该按钮时,页面将滚动到记录的鼠标单击位置。请注意,此示例仅记录单个单击位置,并且不会重置记录的坐标,因此在记录新位置之前,必须手动单击“记录坐标”按钮。您可以根据需要进行修改和调整。
相关问题
js回到记录的xy坐标位置
您可以使用 `window.scrollTo(x, y)` 方法将页面滚动到指定的坐标位置。下面是一个简单的示例代码,可以回到之前记录的x、y坐标位置:
```html
<!DOCTYPE html>
<html>
<head>
<title>Go back to recorded position</title>
<script>
var xCoordinate;
var yCoordinate;
function recordClick(event) {
xCoordinate = event.clientX;
yCoordinate = event.clientY;
}
function goBack() {
window.scrollTo(xCoordinate, yCoordinate);
}
</script>
</head>
<body onclick="recordClick(event)">
<p>Click anywhere on the page to record the click coordinates.</p>
<button onclick="goBack()">Go back to the click location</button>
<p>Scroll down and click the button to go back to the recorded position.</p>
<button onclick="goBack()">Go back to the recorded position</button>
</body>
</html>
```
在这个示例代码中,当用户单击页面上的任意位置时,页面会记录鼠标单击的x、y坐标。然后,当用户单击“回到记录位置”按钮时,页面将滚动到之前记录的x、y坐标位置。
js获取鼠标点击位置坐标
可以使用鼠标事件对象(MouseEvent)获取鼠标点击位置的坐标。
如下面的示例代码所示,可以在鼠标点击事件处理函数中,通过鼠标事件对象的 clientX 和 clientY 属性获取鼠标点击位置的坐标:
```javascript
document.addEventListener('click', function(event) {
console.log('鼠标点击位置坐标:', event.clientX, event.clientY);
});
```
其中,event.clientX 和 event.clientY 分别表示鼠标点击位置相对于浏览器窗口左上角的水平和垂直坐标。如果需要获取相对于页面文档左上角的坐标,可以使用 event.pageX 和 event.pageY 属性。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)