獲取滑鼠在螢幕座標時的相容性問題處理
阿新 • • 發佈：2020-12-27
技術標籤：domjavascript
在做一些與滑鼠相關的效果時，經常要獲取滑鼠在瀏覽器上面的座標。而不同的瀏覽器的相容性是不一樣的，這次向大家介紹如何解決這個問題。
獲取座標的步驟：
第一步：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" 這樣我們就能獲取滑鼠點選時在可視視窗的座標。但是我們滑動滾輪時，滑鼠的座標範圍仍然是沒有改變的，這就和我們的目標期望不一樣了。為了解決這個問題，我們可以用page來替換client。
<script>
document.onclick = function(e){
//console.log(e.clientX); //獲取滑鼠點選時在可視視窗的座標，X軸。未滾動滑輪時。 這樣滑鼠的座標就能隨著滾輪滑動時發生改變，達到了我們想要的效果。但是，並不是所有的瀏覽器都支援page這個。從IE9以後才支援，為了解決這個問題，需要引出scroll這個方法。獲取滾輪滑動時的距離。需要注意的是，event事件物件沒有scroll這個方法。
屬於window下面的方法，一般情況下window是可以省略的，因此可以直接獲取。
<script>
window.onscroll = function(){
scrollTop = document.documentElement.scrollTop;
console.log(scrollTop); //滑動滾輪時，視覺化視窗向下移動的距離
}
</script>
這裡又涉及到scroll的相容性問題的處理。解決辦法如下：
<script>
window.onscroll = function(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop); //滑動滾輪時，視覺化視窗向下移動的距離
}
</script>
這樣，就能在不同的瀏覽器的不同版本獲取到滑鼠的座標了。
完整程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>獲取滑鼠在螢幕的座標的相容性處理</title>
<style>
p {
height: 2000px;
}
</style>
</head>
<body>
<p></p>
<script>
document.onclick = function(e){
//console.log(e.clientX); //獲取滑鼠點選時在可視視窗的座標，X軸。未滾動滑輪時。
//console.log(e.clientY); //獲取滑鼠點選時在可視視窗的座標，Y軸。未滾動滑輪時。
//console.log(e.pageX); //獲取滑鼠點選時在頁面的座標，X軸。
//console.log(e.pageY); //獲取滑鼠點選時在頁面的座標，Y軸。
var pageX = e.clientX + getscroll().scrollLeft;
var pageY = e.clientY + getscroll().scrollTop;
console.log(pageX);
console.log(pageY);
}
function getscroll(){
scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
return {
scrollTop : scrollTop,
scrollLeft : scrollLeft
}
}
</script>
</body>
</html>