拖动html元素时检测到mouseenter事件

Detecting mouseenter event while dragging html element

本文关键字：mouseenter 事件 检测 html 元素 拖动      更新时间：2023-09-26

我正在尝试使用统一的正方形图像制作一种拖放益智网站，我已经编写了拖动代码，通过<img>元素拖动各个图像。

然而，我注意到，当将一个<img>元素拖动到附加了addEventListener("mousenter", function () {//code};)的另一个元素上时，mouseenter事件不会触发。如果在不拖动图像的情况下将鼠标移动到元素上，则事件将正常触发。

有人对如何解决这个问题有什么想法吗？我唯一猜测atm是<img>元素阻止侦听器看到鼠标。

var dragImg = document.querySelector(".images img");
dragImg.addEventListener("mousedown", function () {
  console.log("mousedown detected " + dragImg.clientHeight);
  dragImg.setAttribute("id", "drag");
  dragging = true;
});
dragImg.addEventListener("mousemove", function (event) {
  if (dragging) {
    dragImg.style.top = (event.clientY - dragImg.clientHeight/2) + "px";
    dragImg.style.left = (event.clientX - dragImg.clientWidth/2) + "px";
  }
});
dragImg.addEventListener("mouseup", function () {
  console.log("mouseup detected");
  dragging = false;
  //reset position if not in clipboard
  dragImg.removeAttribute("id");
  dragImg.style.top = "";
  dragImg.style.left = "";
});
//Clipboard behavior - This listener doesn't fire when dragging an img?
var clipboard = document.querySelector(".clipboard");
clipboard.addEventListener("mouseover", function () {
  if (dragging) {
    console.log("mouse entered clipboard!");
    clipboard.style.backgroundColor = "red";
  }
});

#drag {
    position: absolute;
}

问题是鼠标从不悬停在.clipboard上，因为图像总是在指针下方。

简单的解决方案是添加pointer-events:none;（旧版浏览器不支持）。

var dragImg = document.querySelector(".images img");
var dragging = false;
dragImg.addEventListener("mousedown", function (event) {
  event.stopPropagation();
  console.log("mousedown detected " + dragImg.clientHeight);
  dragImg.setAttribute("id", "drag");
  dragging = true;
  document.addEventListener('mousedown', function documentMouseDown(){
    if (dragging) {
      dragImg.removeAttribute("id");
      dragging = false;
      document.removeEventListener('mousedown', documentMouseDown);
    }
  });
});
document.addEventListener("mousemove", function (event) {
  if (dragging) {
    dragImg.style.top = (event.clientY - dragImg.clientHeight/2) + "px";
    dragImg.style.left = (event.clientX - dragImg.clientWidth/2) + "px";
  }
});
dragImg.addEventListener("mouseup", function () {
  console.log("mouseup detected");
  dragging = false;
  //reset position if not in clipboard
  dragImg.removeAttribute("id");
  dragImg.style.top = "";
  dragImg.style.left = "";
});
//Clipboard behavior - This listener doesn't fire when dragging an img?
var clipboard = document.querySelector(".clipboard");
clipboard.addEventListener("mouseover", function () {
  if (dragging) {
    console.log("mouse entered clipboard!");
    clipboard.style.backgroundColor = "red";
  }
});
#drag {
  position: absolute;
  pointer-events:none;
}
.clipboard {
  width:200px;
  height:200px;
  background:green;
}
img {
  -webkit-user-select:none;
}
<div class="clipboard"></div>
<div class="images">
  <img src="https://i.stack.imgur.com/NghNQ.jpg" />
</div>

http://jsbin.com/hugewi/edit?html，css，js

相关文章：