I'm trying to create a file drag/drop handler (drag a file into the browser window, to be used for upload).
For some reason when I bind the drag/drop listener to $("body") instead of to a $("div") in the body the events fire several times in a row, sometimes even non-stop (seemingly looping). What could be causing this?
Here's a trimmed down version of the code: http://jsfiddle.net/WxMwK/9/
var over = false;
$("body")
.on("dragover", function(e){
e.preventDefault();
if (! over) {
over = true;
$("ul").append($("<li/>").text("dragover"));
}
})
.on("dragleave", function(e){
e.preventDefault();
if (over) {
over = false;
$("ul").append($("<li/>").text("dragleave"));
}
})
.on("drop", function(e){
e.preventDefault();
if (over) {
over = false;
$("ul").append($("<li/>").text("drop"));
}
});
To test: drag a file into the orange area, you'll see the event firing multiple times in a row.
The anon is (mostly) correct. To put it simply: when the mouse moves over the edge of an element inside your drop target, you get a dropenter for the element under the cursor and a dropleave for the element that was under the cursor previously. This happens for absolutely any descendant.
You can't check the element associated with dragleave, because if you move the mouse from your drop target onto a child element, you'll get a dropenter for the child and then a dropleave for the target! It's kind of ridiculous and I don't see how this is a useful design at all.
Here's a crappy jQuery-based solution I came up with some time ago.
var $drop_target = $(document.body);
var within_enter = false;
$drop_target.bind('dragenter', function(evt) {
// Default behavior is to deny a drop, so this will allow it
evt.preventDefault();
within_enter = true;
setTimeout(function() { within_enter = false; }, 0);
// This is the part that makes the drop area light up
$(this).addClass('js-dropzone');
});
$drop_target.bind('dragover', function(evt) {
// Same as above
evt.preventDefault();
});
$drop_target.bind('dragleave', function(evt) {
if (! within_enter) {
// And this makes it un-light-up :)
$(this).removeClass('js-dropzone');
}
within_enter = false;
});
// Handle the actual drop effect
$drop_target.bind('drop', function(evt) {
// Be sure to reset your state down here
$(this).removeClass('js-dropzone');
within_enter = false;
evt.preventDefault();
do_whatever(evt.originalEvent.dataTransfer.files);
});
The trick relies on two facts:
When you move the mouse from a grandchild into a child, both dragenter and dragleave will be queued up for the target element—in that order.
The dragenter and dragleave are queued together.
So here's what happens.
In the dragenter event, I set some shared variable to indicate that the drag movement hasn't finished resolving yet.
I use setTimeout with a delay of zero to immediately change that variable back.
But! Because the two events are queued at the exact same time, the browser won't run any scheduled functions until both events have finished resolving. So the next thing that happens is dragleave's event handler.
If dragleave sees that it was paired with a dragenter on the same target element, that means the mouse must have moved from some descendant to some other descendant. Otherwise, the mouse is actually leaving the target element.
Then the setTimeout finally resolves zero seconds later, setting back the variable before another event can come along.
I can't think of a simpler approach.
You are adding a listener on the BODY HTMLElement for the dragover, dragleave and drop.
When you continue to drag over the DIV, there is a dragleave that is fired because the mouse is no more dragging over the BODY, but over the DIV.
Secondly, as you are not stopping the bubble event on the DIV (no listener is set), the dragover fired on the DIV is bubling to the BODY.
If I resume:
The mouse enter the body (in dragover)
--> fire drag over (body)
The mouse enter the DIV in the body
--> fire drag leave (of BODY)
--> fire drag over (of DIV) --> event bubling --> fire drag over (of BODY)
There is a similar problem with mouseover and mouseout, which is fixed by using mouseenter and mouseleave.
May be you can try the same code using dragenter event type. If its not working, you can check if the event.target is the BODY. This test could help to skip undesired drag event.
Good luck
var over = false;
$("body")
.on("dragover", function(e){
e.preventDefault();
if (! over) {
over = true;
$("ul").append($("<li/>").text("dragover"));
}
})
.on("dragleave", function(e){
e.preventDefault();
if (over) {
over = false;
$("ul").append($("<li/>").text("dragleave"));
}
})
.on("drop", function(e){
e.preventDefault();
if (over) {
over = false;
}
});
Or you could just use stop(); to stop animation buildup
Related
Repro: https://jsfiddle.net/ssabc/cL6qxn1r/13/
I have a background element and a foreground element (you can think of it as a dialog popup on top of a canvas). When the user right-clicks on the foreground I would like to prevent the context menu from appearing in the background.
I tried binding a handler for the foreground's context menu and returning false from it to no avail:
document.getElementById('above').oncontextmenu = function(e) {
e.preventDefault();
return false;
}
As you can see in the JSFiddle, the oncontextmenu-event triggers on both elements. Here's a screenshot showing event firing in the background no matter which element is right-clicked
Is there any way to prevent the background event from firing?
You just need to add
e.stopPropagation();
to your child element right click event handler. With the change, it would look like this:
document.getElementById('above').oncontextmenu = function(e) {
e.preventDefault();
e.stopPropagation(); // <=== add this
getResultP().innerHTML += '<li>Dialog oncontextmenu called</li>';
return false;
}
This prevents the event from bubbling up the DOM tree. Read more about it here.
I have a problem with Jquery hover and click on mobile.. Let me explain!
I have square div and, when the mouse is hover it, a new div appear and follow the mouse. You can even click the square div and if so, a new page is opened. The problem now is that, on mobile, I need two click for the new page to be opened, since the first click is read as "hover".
I tried the
$("#mydiv").on('click touchend', function(e)
Actually it works, but with this, if I want to scroll the page on mobile, and I start the swipe on the square div, the new page is opened, which it shouldn't since I didn't click on the square div, just "passed by".
Try using one of those events
https://github.com/benmajor/jQuery-Touch-Events#4-the-events
$('#mydiv').bind('tap', function(e) {
console.log('User tapped #myDiv');
});
As per documentation:
"The event's target is the same element that received the touchstart event corresponding to the touch point, even if the touch point has moved outside that element."
You can see the documentation of touchend also:
https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
If you start your scroll with the square div then square div touchend event will be fired after the release of that finger even after you move your finger to the other elements.
To solve this problem, you can use these events:
https://github.com/benmajor/jQuery-Touch-Events#4-the-events
If you want to stick with this touchend event then there is a workaround:
Declare a global variable i.e.
var isScroll = false, timer;
Apply touchmove eventhandler on document which will fired for touch devices only, this handler detect whether the document is getting scrolled if yes set the isScroll flag to true that will false after 500ms:
$(document).on("touchmove", function(e) {
isScroll = true;
if(timer) clearTimeout(timer);
timer = setTimeout(function() {
isScroll = false;
}, 800);
})
and insert if condition in your eventHandler:
$("#mydiv").on('click touchend', function(e) {
if(!isScroll) {
//insert your code here;
}
}
I have a click event handler and a mousedrag event handler for a Paper.js Item.
item.on('click', function(event) {
event.stopPropagation();
event.preventDefault();
//...
});
item.on('mousedrag', function(event) {
event.stopPropagation();
event.preventDefault();
//...
});
Whenever I cause a mousedrag event a click event is also generated. How can I prevent this?
When the mouse is clicked then released a click event is generated. When the mouse is held down and dragged, drag events are generated. I generally implement this by setting events on 'mousedown' and 'mouseup' in addition to 'mousedrag'.
Playing around I've found that if you return false from your 'mousedrag' event handler it will suppress further events, i.e., neither 'mouseup' nor 'click' will be invoked. Here's a sketch illustrating mouse events. If you uncomment the return false in the 'mousedrag' handler you will not get the 'mouseup' or 'click' events.
The following is example code for how I usually implement it - I didn't discover that returning false from the handler suppressed further processing until looking at the code tonight.
var drag;
view.on('mousedown', function(e) {
drag = false;
});
view.on('mousedrag', function(e) {
drag = true;
// do whatever else you need to when dragging the mouse
});
view.on('mouseup', function(e) {
// see if it was just a click and handle that
if (drag) {
// handle the end of a drag
} else {
// do whatever a click down/up without drag needs to do
}
});
I'm currently using this code to bind events in a Google Chrome extension:
var bindEvent = function(elem ,evt,cb) {
//see if the addEventListener function exists on the element
if ( elem.addEventListener ) {
elem.addEventListener(evt,cb,false);
//if addEventListener is not present, see if this is an IE browser
} else if ( elem.attachEvent ) {
//prefix the event type with "on"
elem.attachEvent('on' + evt, function(){
/* use call to simulate addEventListener
* This will make sure the callback gets the element for "this"
* and will ensure the function's first argument is the event object
*/
cb.call(event.srcElement,event);
});
}
};
/* ... */
bindEvent(document,'click', function(event)
{ var target = event.target || event.srcElement;
/*Code to do stuff about a clicked element*/
this.removeEventListener('click',arguments.callee,false);
});
And it works well with the click event.
Now, my question is: what event could I use to change something about an element being hovered and not simply clicked on? The final goal would be to change the background color of the element being hovered by the cursor.
I tried mouseover, mouseenter, focus and focusin to no avail. To be exact, I tried to do a console.log() when the event triggers, but it never really happened, except one time when I clicked on a dialog box and it detected my focus on this element.
I currently am using Chrome (v24.0), but a cross-browser solution would be a nice feature because I plan to reuse the script on Firefox later. It's not a top priority though.
The relevant events for hovering are mouseover and mouseout - they are triggered when the mouse enters or leaves an element respectively. However, since that event is also triggered for the child elements of the element you attached your listener on and these events bubble up, you also have to check event.target:
elem.addEventListener("mouseover", function(event) {
if (event.target == elem) {
// Mouse pointer entered elem
}
}, false);
elem.addEventListener("mouseout", function(event) {
if (event.target == elem) {
// Mouse pointer left elem
}
}, false);
I have a <div> element that is created in my script and appended to another <div>. I have:
coverElm.onmousedown = mouseDownEventHandeler;
document.onmouseup = mouseUpEventHandeler;
document.onmousemove = mouseMoveEventHandeler;
I have the functions defined and work great and keep track of if the mouse is down with a boolean mouseDown.
The Problem - When the mouse is pressed down and is released the document.onmouseup is never handled. I think its because its doing a drag of whatever is in the <div> witch is just a few words of text. I have this issue without text too.
So what I'm looking for is a way to prevent this odd dragging behavior, or way for onmousedrag to see if the mouse is pressed down of not - NOT USING THE MOUSE UP AND MOUSE DOWN METHODS
Here are my functions:
function mouseUpEventHandeler(e) {
mouseDown = false;
}
function mouseDownEventHandeler(e) {
mouseDown = true;
}
function mouseMoveEventHandeler(e) {
if (mouseDown) {
coverElm.innerHTML ="<p>Mouse down and dragging</p>";
}
}
90% of the time, this is because the dragged element is in front of the element with the mouseup event listener, so the parent element underneath never gets the event.
Usually, this can be fixed by using addEventListener as opposed to the inline form of the event. Another way to fix this is to give the dragged element an eventListener for when the mouse is released. Also, you can have a div that is put in front of all other elements whenever an element starts to drag (via the zIndex property).
Edit: I whipped up some proof-of-concept code:
http://jsfiddle.net/2BkEM/5/
$j(divID).bind('dragstart', function (event) { event.preventDefault() });
Thanks all