Question

我有一个跟随鼠标后对象的功能，我希望能够随意停止并开始跟踪，而不会隐藏对象。

它几乎可以按照我想要的方式工作，并且确实在跟踪鼠标，但是如果没有实际移动鼠标，我无法移动初始位置。

E.G。当我触发该函数时，该对象仍然在另一个地方，直到我移动鼠标，但我想要做的是在连接mousemove事件之前先将它移动到初始位置。

以下是我想触发该功能的方法：

showtrail();

function showtrail(shit){
//this is how I tried to set the initial position first, but this get me an error:..
//followmouse(); 
document.onmousemove=followmouse; //and this is how I attach the event.
}

这是移动对象的实际功能的一部分，但是，如果我尝试初始化/模仿第一乐章，我就无法得到坐标。

    function followmouse(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
if (typeof e != "undefined"){  //This- if triggered by mousemove, and it works
xcoord+=e.pageX
ycoord+=e.pageY
}
else {   //this was meant for the initial call, but... for some reason
xcoord+=document.body.scrollLeft+event.clientX // it triggers an error,
ycoord+=document.body.scrollTop+event.clientY // saying event.clientX undefined.
}
}

所以event.clientX似乎永远不会起作用，我无法弄明白如何获得实际的鼠标位置..

请指导..

Answer 1

event.clientX和event.clientY是错误的。它们应该是e.clientX和e.clientY

在followmouse（e）中获得xcoord和ycoord的更优雅的跨浏览器方式是：

xcoord = e.pageX||(e.clientX+(document.body.scrollLeft||document.documentElement.scrollLeft));
ycoord = e.pageY||(e.clientY+(document.body.scrollTop||document.documentElement.scrollTop));

现在如果我做对了，那么后面的对象应该有一个初始的绝对位置并显示为一个块，这意味着你有初始的x和y（左和上）。因此，通过使用全局bool var来进行当前跟随或不进行。

<style>
...
#trail {position:absolute;left:0;top:0;display:none}
...
</style>

<script>
var following = false;
...
function followmouse(e){
   if (!following){
       document.getElementById('trail').style.display='none';
       return;
   }
   ...
   document.getElementById('trail').style.display='block';
}
</script>

通过更改显示，您可以选择将#trail移动到其初始位置，然后按下鼠标，选择以避免移动并让鼠标从其最新的跟随位置跟随鼠标。

Answer 2

编辑1：

出于这个目的，我建议使用requestAnimationFrame API，而不是经典的DOM事件。所述API对于创建动画和暂停它们更有效。

也看看这个：requestAnimationFrame for smart animating

这很难过，但在网页上移动鼠标之前，你无法获得鼠标的初始位置。我的意思是你无法在mousemove事件之前校准你的对象。这就是我将在类似的项目中做的事情：

<!DOCTYPE html>
<html>
    <head>
        <title>Title</title>
        <script type="text/javascript">
            var targetID = 'mydiv'; // div that is to follow the mouse
            var pauseFollowing = false;
            // (must be position:absolute)
            var offX = 15;          // X offset from mouse position
            var offY = 15;          // Y offset from mouse position

            function mouseX(evt) {if (!evt) evt = window.event; if (evt.pageX) return evt.pageX; else if (evt.clientX)return evt.clientX + (document.documentElement.scrollLeft ?  document.documentElement.scrollLeft : document.body.scrollLeft); else return 0;}
            function mouseY(evt) {if (!evt) evt = window.event; if (evt.pageY) return evt.pageY; else if (evt.clientY)return evt.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop); else return 0;}

            function follow(evt) {
                if(pauseFollowing) {
                    //or do something else at pause
                    return false;
                }
                var obj = document.getElementById(targetID).style;
                obj.visibility = 'visible';
                obj.left = (parseInt(mouseX(evt))+offX) + 'px';
                obj.top = (parseInt(mouseY(evt))+offY) + 'px';
            }

            function toggleFollow() {
                pauseFollowing = !pauseFollowing;
            }

            window.onload = function() {
                window.onclick = toggleFollow;
                document.onmousemove = follow;
            }
        </script>
    </head>
    <body>
        <div id="mydiv" style="visibility: hidden; top:0; left:0 ;width: 100px; height: 100px; background: #ff0; position: absolute;"></div>
    </body>
</html>

Answer 3

好吧，我就是这样做的。最好的想法是始终捕捉到在全局变量中设置位置的举动。现在我可以选择将它固定在任何特定位置（如果我将coords传递给showtrail）或实际跟随鼠标; 我还添加了一个事件监听器，因此如果鼠标在跟随时移出窗口，它将被隐藏。到目前为止，它完全符合我的要求：

var trailimage=["scripts/loading_mouse.gif", 24, 24] //image path, plus width and height
var offsetfrommouse=[2,10] //image x,y offsets from cursor position in pixels. Enter 0,0 for no offset
var global_coord=[0,0]
var follow=false;

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="z-index: 10;position:absolute;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 hidett(){  gettrailobj().display="none";   }
function showtt(){  gettrailobj().display="block";  }

function truebody(){    return (document.body||document.documentElement);   }

function showtrail(shit){
    if (typeof shit == "undefined"){    //Follow Mouse
        follow=true;
        setmousepos(global_coord[0],global_coord[1]);
    }
    else {              //Set fixed in specific place
        follow=false;
        showtt()
        gettrailobj().left=shit.left+6+"px"
        gettrailobj().top=shit.top-5+"px"
    }
}

function hidetrail(){
    hidett()
    follow=false;
}

function setcoord(e){
var xcoord=offsetfrommouse[0]
var ycoord=offsetfrommouse[1]
var xxcoord = e.pageX||(e.clientX+truebody().scrollLeft);
var yycoord = e.pageY||(e.clientY+truebody().scrollTop);
if (typeof xxcoord != "undefined"&&typeof yycoord != "undefined"){
    xcoord+=xxcoord;
    ycoord+=yycoord;
    global_coord=[xcoord,ycoord];
    if (follow) setmousepos(xcoord,ycoord);
}}

function setmousepos(xcoord,ycoord){
    var docwidth=truebody().scrollLeft+truebody().clientWidth   
    var docheight=Math.max(truebody().scrollHeight, truebody().clientHeight)
    if ((xcoord+trailimage[1]+3>docwidth || ycoord+trailimage[2]> docheight ||!follow)){
        hidett()
    }
    else{
        showtt();
        gettrailobj().left=xcoord+"px"
        gettrailobj().top=ycoord+"px"
    }
}

window.addEventListener("mouseout",
    function(e){
        mouseX = e.pageX;
        mouseY = e.pageY;
        if ((mouseY >= 0 && mouseY <= window.innerHeight)
        && (mouseX >= 0 && mouseX <= window.innerWidth)){
            return false;
        }else{
            if (follow) hidett()
        }
    },
    false);

document.onmousemove=setcoord;

Javascript无法使onmousemove脚本按预期工作

3 个答案: