JavaScript:鼠标坐标不正确(全屏模式下的 pageX 和 pageY)

标签 javascript

我创建 JavaScript 来获取鼠标坐标。

通过鼠标坐标显示图像的脚本(动画光标脚本 (с) Zac Ang Eng Keat):

<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
document.body.style.cursor = 'none';
var trailimage=["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height
var offsetfrommouse=[0,0] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration=0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:visible;left:0px;top:0px;width:1px;height:1px"><img src="'+trailimage[0]+'" border="0" width="'+trailimage[1]+'px" height="'+trailimage[2]+'px"></div>')

function gettrailobj(){
if (document.getElementById)
return document.getElementById("trailimageid").style
else if (document.all)
return document.all.trailimagid.style
}

function truebody(){
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail(){
gettrailobj().visibility="hidden"
document.onmousemove=""
}

function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]

xcoord+=e.pageX
ycoord+=e.pageY

var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight)
gettrailobj().display="none"
else
gettrailobj().display=""
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}

document.onmousemove=followmouse
if (displayduration>0)
setTimeout("hidetrail()", displayduration*1000)
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>

但是，它有一些问题:如果在 Firefox 中我更改了全屏模式，图像会得到不正确的坐标。

我尝试使用 screenX 和 screenY 代替 pageX 和 pageY，但它需要以某种方式获得更改全屏模式的时刻。

更新:

<html>
<head>
<title>Cursor</title>
<script type="text/javascript">
var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');

function isFullScreen() { //helper func to detect if Firefox is in fullscreen
  if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
  return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
}

document.body.style.cursor = 'none';
var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32] //image path, plus width and height 
var offsetfrommouse = [0, 0] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var displayduration = 0 //duration in seconds image should remain visible. 0 for always.

if (document.getElementById || document.all)
  document.write('<div id="trailimageid" style="position:absolute; visibility:visible; left:0px; top:0px; width:1px; height:1px"><img src="' + trailimage[0] + '" border="0" width="' + trailimage[1] + 'px" height="' + trailimage[2] + 'px"></div>')

function gettrailobj() {
  if (document.getElementById)
    return document.getElementById("trailimageid").style;
  else if (document.all)
    return document.all.trailimagid.style;
}

function truebody() {
  return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
}

function hidetrail() {
  gettrailobj().visibility = "hidden";
  document.onmousemove = "";
}

var last_screenX = -1, last_screenY = -1;
var deltaX = 0, deltaY = 0;

function followmouse(e) {

  var xx = e.pageX, yy = e.pageY;

  if (isNaN(xx) && isFirefox) { //its called from window_resize
    //if (isFullScreen()) 
    xx = last_screenX + window.scrollX;
    yy = last_screenY + window.scrollY;
    if (!isFullScreen()) { //exit from fullscreen 
      //alert("exit");
      xx -=  deltaX;
      yy -= deltaY;
    }
  }

  //msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;

  var xcoord = xx + offsetfrommouse[0];
  var ycoord = yy + offsetfrommouse[1];

  var docwidth = document.all ? truebody().scrollLeft + truebody().clientWidth : pageXOffset + window.innerWidth - 15;

  var docheight = document.all ? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);

  if (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight)
    gettrailobj().display = "none";
  else
    gettrailobj().display = "";

  gettrailobj().left = xcoord + "px";
  gettrailobj().top = ycoord + "px";

  if (!isNaN(e.screenX)) {
    last_screenX = e.screenX;
    last_screenY = e.screenY;
  }

  if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
    deltaX = e.screenX - e.clientX;
    deltaY = e.screenY - e.clientY;
  }
}

document.onmousemove = followmouse;
window.onresize = followmouse;  // *** new event handler is add

if (displayduration > 0)
  setTimeout("hidetrail()", displayduration * 1000);
</script>
</head>
<body>
Press F11 (make the browser window full screen) in Firefox
</body>
</html>

最佳答案

您应该添加 onresize 事件处理程序来检查用户是否进入全屏模式并计算鼠标在这种情况下的新位置。另外，当用户退出全屏时，我们应该重新计算其位置。我画了一些图，发现转换公式如下:

//when enter to FullScreen:
xx = last_screenX + window.scrollX;
yy = last_screenY + window.scrollY;

//when Exit from FullScreen:
xx = last_screenX + (e.screenX - e.clientX) + window.scrollX
yy = last_screenY + (e.screenY - e.clientY) + window.scrollY
当页面包含滚动条时，需要

window.scrollX 和 window.scrollY。

所以，最终的代码将是这样的:

<html>
<head>
  <title>Cursor</title>
</head>
<body>
  <script type="text/javascript">
  var isFirefox = (navigator.userAgent.toLowerCase().indexOf('firefox') > -1) || (typeof InstallTrigger !== 'undefined');

  function isFullScreen() { //helper func to detect if Firefox is in fullscreen
    if (window['fullScreen'] !== undefined) return window.fullScreen; //Firefox support this property
    return (screen.width == window.innerWidth) && (window.screenY == 0 || window.screenTop == 0) && Math.abs(screen.height - window.innerHeight) < 45;
  }

  document.body.style.cursor = 'none';
  var trailimage = ["http://2aek.com/images/cursors/cur1.gif", 32, 32]; //image path, plus width and height
  var offsetfrommouse = [-10, -5]; //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset. also try [-10, -5]
  var displayduration = 0; //duration in seconds image should remain visible. 0 for always.

  if (document.getElementById || document.all)
    document.write('<div id="trailimageid" style="position:absolute; visibility:visible; display:none; left:0px; top:0px; width:1px; height:1px"><img src="' + trailimage[0] + '" border="0" width="' + trailimage[1] + 'px" height="' + trailimage[2] + 'px"></div>')

  function gettrailobj() {
    if (document.getElementById)
      return document.getElementById("trailimageid").style;
    else if (document.all)
      return document.all.trailimagid.style;
  }

  function truebody() {
    return (!window.opera && document.compatMode && document.compatMode != "BackCompat") ? document.documentElement : document.body;
  }

  function hidetrail() {
    gettrailobj().visibility = "hidden";
    document.onmousemove = "";
  }

  var last_screenX = -1, last_screenY = -1;
  var deltaX = 0, deltaY = 0;

  var trail = gettrailobj();
  var tbody = truebody();

  function followmouse(e) {

    var xx = e.pageX, yy = e.pageY;

    if (isNaN(xx) && isFirefox) { //its called from window_resize
      //if (isFullScreen()) 
      xx = last_screenX + window.scrollX;
      yy = last_screenY + window.scrollY;
      if (!isFullScreen()) { //exit from fullscreen 
        //alert("exit");
        xx -=  deltaX;
        yy -= deltaY;
      }
    }

    //msg.innerHTML = "clientY: "+e.clientY+", pageY: "+e.pageY+", scrnY: "+e.screenY+", win.screenY: "+window.screenY;

    var xcoord = xx + offsetfrommouse[0];
    var ycoord = yy + offsetfrommouse[1];

    var docwidth = document.all ? tbody.scrollLeft + tbody.clientWidth : pageXOffset + window.innerWidth - 15;
    var docheight = document.all ? Math.max(tbody.scrollHeight, tbody.clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight);

    trail.display = (xcoord + trailimage[1] + 3 > docwidth || ycoord + trailimage[2] > docheight) ? "none" : "";

    trail.left = xcoord + "px";
    trail.top = ycoord + "px";

    if (!isNaN(e.screenX)) {
      last_screenX = e.screenX;
      last_screenY = e.screenY;
    }

    if((e.screenY - e.clientY) > 5) { //not fullscreen. (in fullscreen it is 0 or 1)
      deltaX = e.screenX - e.clientX;
      deltaY = e.screenY - e.clientY;
    }
  }

  document.onmousemove = followmouse;
  window.onresize = followmouse;  // *** new event handler is add

  if (displayduration > 0)
    setTimeout("hidetrail()", displayduration * 1000);

  </script>

  <div>Press F11 (make the browser window full screen) in Firefox</div>

</body>
</html>

关于JavaScript:鼠标坐标不正确(全屏模式下的 pageX 和 pageY)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42132146/

上一篇：javascript - 检查我的表单中的选项是否被选中将不起作用

下一篇：javascript - 如果输入为空，则以逐步形式放置错误类

相关文章：

javascript - 类型错误 : this is undefined

javascript - 防止默认不起作用

javascript - 未捕获的语法错误 : Unexpected token < when using bootstrap js

javascript - SVG 不仅悬停路径而且悬停所有 View 框

javascript - 如何使用jquery将远程内容加载到对话框中？

javascript - 函数(a){ var a ='test' ; } : Is "var" required? 如果 a 未定义怎么办？

javascript - Three.js Projector 和 Ray 对象

javascript - 如何按数组元素过滤集合

javascript - 如果范围变量为空，则阻止在 AngularJS View 中加载图像

javascript - 如何在 Javascript 中将对象附加到 JSON 数组

©2024 IT工具网  联系我们