Question

是否有方法在拖动元素时检测鼠标？

我尝试拖放元素，如果它在视口之外，则显示包含div元素的弹出窗口。

只有当我没有时才会触发mouseleave;拖动元素，但是如果我试图向外拖动则不会触发mouseleave

因此鼠标离开窗口无需点击。单击鼠标离开对我不起作用。

function verifyMouseLeave(el)
{
    console.log(document.onmouseleave);
    document.onmouseleave = function(){
        console.log("Mouse Out!");
        isMouseOver = true;
    }

    document.onmousedown = function(){
        console.log("Mouse Down!");
        isMouseDown = true;
    }

    if(isMouseOver == true && isMouseDown == true)
    {
        showPopup();
        el.remove();
        isMouseOver =false;
        isMouseDown = false;
    }
}

所以我有三个div，我想把它们移到视口之外。当我开始拖动div并将其移动到窗口并释放它时，我希望它保持与初始相同的位置。但是如果我把它拖到窗外，我想从这里删除它并显示一个弹出窗口。

非常感谢。

Answer 1

如果您参考HTML5 D＆amp; D，您是否已阅读moz的规范？ https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

- 否则 -

这里以及从我对你的代码了解到的一点点的例子，你不应该绑定到文档，而是绑定到包装元素。其次，事件应该在您的验证功能之外。由于功能工作是检查两个事件是否同时被触发。这是工作代码：

var isMouseLeave, isMouseDown;
var body = document.getElementById("body")

body.onmouseout = function(){
  console.log("Mouse Out!");
  isMouseLeave = true;
  verifyMouseLeave();
}

body.onmousedown = function(){
  console.log("Mouse Down!");
  isMouseDown = true;
}

function verifyMouseLeave(el){
    if(isMouseLeave == true && isMouseDown == true){
        console.log("Show Pop Up")
        isMouseOver = false;
        isMouseDown = false;
   }
}

示例：

https://jsfiddle.net/194a5672/

Answer 2

尝试.mouseleave（）
将鼠标离开元素时触发的事件处理程序绑定，或者在元素上触发该处理程序。

https://api.jquery.com/mouseleave/

点击鼠标时的Javascript鼠标离开

2 个答案: