Javascript mouseleave when mouse is clicked

Is there a method to detect the mouseleave while an element is dragged?

I try to drag and drop and element and if it is outside the viewport to show a popup that contains elements from the div.

The mouseleave is fired only when I don;t drag the element, but if I try to drag outside the mouseleave is not fired

So mouse leave without click inside the window works. Mouse leave with click doens't work for me.

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;
    }
}

So I have for example three divs that I want to move them outside the viewport. When I begin to drag the div and move it around the window and release it I want it to remain in the same postion as initial. But if I drag it outisde the window I want to remove it from here and show a popup.

Many thanks.

Answers:

Answer

If you referring the HTML5 D&D, have you read up on the spec from moz? https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API

--else--

Here and example of from the little I understand about your code, you should not bind to document, but instead the wrapper element. Second the event should be outside your verification function. As the function job is to check if the two events have fired at the same time. Here the working code:

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;
   }
}

Example:

https://jsfiddle.net/194a5672/

Answer

Try .mouseleave()
Bind an event handler to be fired when the mouse leaves an element, or trigger that handler on an element.

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.