如何在mousemove上通过jQuery插件更改位置元素？-解网

问：

我需要通过mousemove上的jQuery插件更改位置元素。我正在获取索引 .js 文件中的鼠标移动坐标，并尝试将其作为参数传递给 jQuery 自定义插件。因此，indexjs 变量在 mousemove 上会更改，但是当这些变量作为参数传递到插件文件时，它们不会动态更改。还有错误 TypeError：（（S.event.special[o.origType] ||{}）.句柄 ||o.handler）.apply 不是函数

// Plugin jQuery file
(function ($) {
  $.fn.moveAnimate = function (posX,posY) {
    console.log('inner posX', posX)    // the posX is instantly === 1, not being changed reactively
    return $(this).each(function () {
      var $moveElement = $('.move');
      $moveElement.animate(
        {
          position: "absolute",
          left: `${posX} + "150px"`,
          top: `${posY} + "150px"`
        },
        1000
      );
    });
  };
})(jQuery);


// index.js file
$(function() {
  let globalX = 1
  let globalY = 1

    $("body").on("mousemove", (e) => {
      console.log('inner', globalX)  // changes the globalX
      globalX = e.pageX;
      globalY = e.pageY;
    })

    $("body").on("mousemove", $(".move").moveAnimate(globalX, globalY))
    
});

JavaScript jQuery 函数插件参数

如何定义？我假设从jQuery对象实例的使用来看，它是一个jQuery插件，因此直接调用它不起作用。您的代码也在使用和超出范围，并且您正在执行该函数并将其返回值作为的事件处理程序传递。您需要将该调用包装在匿名函数中。moveAnimate()posXposYmoveAnimate()mousemove

1赞 Rory McCrossan 10/28/2023

事实上，我认为这是继你之前的问题之后，但这似乎是一个 X/Y 问题，你问的是解决方案的有缺陷的尝试，而不是描述你试图解决的实际问题。如果您向我们提供了这些信息，那么我们可以更好地为您提供帮助。

0赞 bob 10/28/2023

谢谢，我已经编辑了问题，试图详细描述最初的问题，你能看看吗？

0赞 Rory McCrossan 10/29/2023

感谢您的编辑，我为您添加了答案。您看到的“TypeError”似乎与您在问题中显示的任何代码无关

1赞 bob 10/29/2023

哇，谢谢你这么详细的回答！

答：

1赞 Rory McCrossan 10/29/2023 #1

代码中存在一些问题。

left: `${posX} + "150px"`,不是有效的数学运算。您需要添加整数值，然后附加到末尾：pxleft: (posX + 150) + 'px'
您只需要一个事件处理程序。body.mousemove
您需要在事件处理程序中调用，而不是单独执行它并提供其返回值作为事件处理程序。$.fn.moveAnimate()
函数中不需要循环，因为可以应用于集合。each()moveAnimate()animate()
使用事件，而不是，因为后者将对鼠标移动的每个像素执行，这不是此用例中需要的mouseentermousemove
该元素需要设置为动画运行前才能正常工作。这可以在CSS中完成。.moveposition: absolute

进行这些更改后，代码工作正常：

// Plugin jQuery file
(function($) {
  $.fn.moveAnimate = function(posX, posY) {
    return $(this).animate({
      left: (posX + 150) + 'px',
      top: (posY + 150) + 'px'
    }, 1000);
  };
})(jQuery);


// index.js file
$(function() {
  $("body").on("mouseenter", e => {
    globalX = e.pageX;
    globalY = e.pageY;
    $(".move").moveAnimate(globalX, globalY);
  });
});

.move {
  position: absolute;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div id="app">
  <h1 class="hello">hello</h1>
  <h1 class="move">move</h1>
</div>

上一个：在表格上组合搜索和复选框 javascript 过滤器

下一个：音频循环平滑开始/结束后，通过点击开始平滑另一个循环

如何在mousemove上通过jQuery插件更改位置元素？

How can I change the position element via jQuery plugin on mousemove?

评论