Question

我遇到一种情况，当用户用鼠标拖动时，某些鼠标事件停止触发。

这是问题的jsFiddle。

更新：您可以找到here更简单的jsFiddle，它也显示了问题。

上下文
我正在创建一种裁剪图像的工具。为此，我在图像上创建了一组<div>元素，用户将能够通过拖动子{{1}中的一个来拖动父<div>的角和边缘。 } s。

详细信息
在<div>上，我向文档正文添加了两个事件侦听器：

一个mousedown事件监听器，可以不断触发
一个mousemove事件监听器，可以触发一次并在用户停止拖动鼠标时删除mouseup监听器

结果
第一次拖动角或边缘时，这始终可以完美工作。但是，第二次拖动相同的角或边时，mousemove事件将触发1到6次（以我的经验），然后停止。释放鼠标时不会触发mousemove事件，但是从那一刻起，mouseup事件将恢复，随后的单击并释放将生成一个mousemove事件。 / p>

调查
在Chrome开发工具中，通过在控制台中输入mouseup或通过检查“元素”选项卡的“事件监听器”窗格中的getEventListeners(document.body)元素，我可以看到事件监听器存在。

在理解这种情况发生的原因以及如何解决此问题方面的任何帮助将不胜感激。

HTML

body

CSS

<!DOCTYPE html>
<html lang=en>
<head>
  <meta charset="utf-8">
  <title>Crop Image</title>

  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="crop">
  <div class="topLeft"></div>
  <div class="top"></div>
  <div class="topRight"></div>
  <div class="right"></div>
  <div class="bottomRight"></div>
  <div class="bottom"></div>
  <div class="bottomLeft"></div>
  <div class="left"></div>
</div>
<pre id="feedback"></pre>
  <script src="js/crop.js"></script>
</body>
</html>

JavaScript

div#crop {
  position: relative;
  width: 320px;
  height: 320px;
  cursor: pointer;
}

div#crop div {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  border: 1px solid #000;
  box-sizing: border-box;
}

div#crop .top,
div#crop .bottom {
  left: 20px;
  width: calc(100% - 40px);
}

div#crop .left,
div#crop .right {
  top: 20px;
  height: calc(100% - 40px);
}

div#crop .topRight,
div#crop .right,
div#crop .bottomRight {
  left: auto;
  right: 0;
}

div#crop .bottomLeft,
div#crop .bottom,
div#crop .bottomRight {
  top: auto;
  bottom: 0;
}

pre#feedback {
  position: fixed;
  top:40px;
  left:40px
}

Answer 1

第二个拖动操作失败的原因是，浏览器使用第一个拖放操作创建了一个选择，该选择的anchorNode是被单击的<div>。然后，第二个拖动尝试移动此选择。揭示这一点的线索是，几乎在第二次拖动开始后，光标变成了move闭合的手。

解决方案是使用CSS来防止选择可拖动的<div>：

div#crop {
  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */
}

具有讽刺意味的是，过去我创建拖曳功能时，出于装饰性原因，我始终禁用选择。我没有意识到这是手术成功的关键因素。

JavaScript：鼠标按下时鼠标事件停止触发

1 个答案: