Javascript 悬停对象时如何更新X和Y坐标

我有一个图像，当我在一个div中单击时会改变位置，如下所示：

mainDiv.click(function (e) {

    var mouseX = e.clientX,
        mouseY = e.clientY;

        test2 = Math.atan(mouseY/mouseX);
        test3 = ((test2 * 180) / 3.14);

        $("#hgun").rotate(test3);  
});

但它仅在我在div内单击时更改位置。当我在div内悬停时，如何使其更改位置？

更改此行：

mainDiv.单击（函数（e）{

到

mainDiv.hover（函数（e）{

hover

接受两个函数：第一个在

mouseenter

上执行，第二个在

mouseleave

上执行。hover（）方法绑定mouseenter和mouseleave事件的处理程序。您可以使用它在鼠标位于元素内时将行为简单地应用于元素

它的名称如下：

$(selector).hover(handlerIn, handlerOut)

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    mainDiv.hover(function (e) {
        var mouseX = e.clientX,
            mouseY = e.clientY;

        test2 = Math.atan(mouseY / mouseX);
        test3 = ((test2 * 180) / 3.14);
        $("#hgun").rotate(test3);
    },
function (e) {
    //On mouseleave
});

mainDiv.mousemove(function (e) {
    var mouseX = e.clientX,
        mouseY = e.clientY;

    test2 = Math.atan(mouseY / mouseX);
    test3 = ((test2 * 180) / 3.14);
    $("#hgun").rotate(test3);
});

它是：

$(selector).hover(handlerIn, handlerOut)

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    mainDiv.hover(function (e) {
        var mouseX = e.clientX,
            mouseY = e.clientY;

        test2 = Math.atan(mouseY / mouseX);
        test3 = ((test2 * 180) / 3.14);
        $("#hgun").rotate(test3);
    },
function (e) {
    //On mouseleave
});

mainDiv.mousemove(function (e) {
    var mouseX = e.clientX,
        mouseY = e.clientY;

    test2 = Math.atan(mouseY / mouseX);
    test3 = ((test2 * 180) / 3.14);
    $("#hgun").rotate(test3);
});

在您的情况下，应该是：

$(selector).hover(handlerIn, handlerOut)

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    mainDiv.hover(function (e) {
        var mouseX = e.clientX,
            mouseY = e.clientY;

        test2 = Math.atan(mouseY / mouseX);
        test3 = ((test2 * 180) / 3.14);
        $("#hgun").rotate(test3);
    },
function (e) {
    //On mouseleave
});

mainDiv.mousemove(function (e) {
    var mouseX = e.clientX,
        mouseY = e.clientY;

    test2 = Math.atan(mouseY / mouseX);
    test3 = ((test2 * 180) / 3.14);
    $("#hgun").rotate(test3);
});

进一步阅读：

---

根据作者的评论更新：

我不确定您到底想要实现什么，但是如果您希望每次鼠标在容器内移动时都进行计算和相关操作，则可以使用该事件

我根据您的代码做了一个简单的修改，请查看它：

我用了我发现的第一个，可能不是你用的，但它应该足以让你走上正确的方向

基本上，您的代码应该如下所示：

$(selector).hover(handlerIn, handlerOut)

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

    mainDiv.hover(function (e) {
        var mouseX = e.clientX,
            mouseY = e.clientY;

        test2 = Math.atan(mouseY / mouseX);
        test3 = ((test2 * 180) / 3.14);
        $("#hgun").rotate(test3);
    },
function (e) {
    //On mouseleave
});

mainDiv.mousemove(function (e) {
    var mouseX = e.clientX,
        mouseY = e.clientY;

    test2 = Math.atan(mouseY / mouseX);
    test3 = ((test2 * 180) / 3.14);
    $("#hgun").rotate(test3);
});

---

看看所有的。我现在的问题是，只要我用鼠标进入框，它就会在那里旋转，但当我在框内时它不会旋转。x和y需要随时更新？再次检查我的答案，我添加了一个演示和一些附加信息和参考。