Question

我在JavaScript中执行一项功能，使立方体跟随鼠标移动但我需要让它们回到原来的位置，当我将鼠标悬停在特定的div上时，只要鼠标位于该div内，就停止它们移动那。如果我在该按钮内移动鼠标，则立方体不会移动，但在我离开按钮后返回移动移动。

＆＃13;

function cubes() {
  $(document).on("mousemove", function(e) {
      $(".cube1").attr("style", "transform: translateX(" + ax + "px) 
        translateY("+ay+"
          px)
        ");
      });
  };

  $(".button").hover(function() {
    $(".cube1").css({
      "transforme": "translate(0)"
    })
  });

＆＃13;

.button {
  width: 200px;
  height: 200px;
}

＆＃13;

Answer 1

您需要在mousemove上捕获.button事件，然后使用stopPropagation来阻止事件将DOM冒泡到文档中。

function cubes() {
  $(document).on("mousemove", function(evnt) {
  
    let {clientX, clientY} = evnt;
      $(".cube1").css('transform', `translateX(${clientX}px) translateY(${clientY}px)`);
  });

  $(".button").on('mouseenter', function() {
    // when the mouse enters the button snap
    // cube1 back to its default position
    $(".cube1").css({
      "transform": "translate(0)"
    });
  });

  $(".button").on('mousemove', function(evnt) {
    // Capture the mousemove event on this element,
    // and stop propagation so the document does not receive
    // the mousemove event.
    evnt.stopPropagation();
  });
}

cubes();

    .button {
      width: 200px;
      height: 200px;
      background: #96bdd9;
    }
    .cube1 {
      height: 50px;
      width: 50px;
      background: #e1ecf4;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="cube1">Cube</div>
    <div class="button">Button</div>

您现在可能熟悉的一些事情：

我使用了template literal来使变换字符串更具可读性。大多数现代浏览器support template literals，最大的例外是IE，但它不是我所谓的现代浏览器。
我使用object destructuring从事件对象中获取clientX和clientY值。 Destruturing是supported by most browsers，包括IE 11。
我使用let来声明我的变量;甚至IE 11也支持let。

如果您需要支持旧浏览器，可以使用ES5重写这些内容。

Answer 2

我不知道这是一个答案，但你有一点错字：

DataState

单击时JavaScript函数终止

2 个答案: