Develop Reference

How to identify if a mouseover event object came from a touchscreen touch?

On virtually all current browsers (extensive details from patrickhlauke on github, which I summarised in an SO answer, and also some more info from QuirksMode), touchscreen touches trigger mouseover events (sometimes creating an invisible pseudo-cursor that stays where the user touched until they touch elsewhere).
Sometimes this causes undesirable behaviour in cases where touch/click and mouseover are intended to do different things.
From inside a function responding to a mouseover event, that has been passed the event object, is there any way I can check if this was a "real" mouseover from a moving cursor that moved from outside an element to inside it, or if it was caused by this touchscreen behaviour from a touchscreen touch?
The event object looks identical. For example, on chrome, a mouseover event caused by a user touching a touchscreen has type: "mouseover" and nothing I can see that would identify it as touch related.
I had the idea of binding an event to touchstart that alters mouseover events then an event to touchend that removes this alteration. Unfortunately, this doesn't work, because the event order appears to be touchstart → touchend → mouseover → click (I can't attach the normalise-mouseover function to click without messing up other functionality).
I'd expected this question to have been asked before but existing questions don't quite cut it:
How to handle mouseover and mouseleave events in Windows 8.1 Touchscreen is about C# / ASP.Net applications on Windows, not web pages in a browser
JQuery .on(“click”) triggers “mouseover” on touch device is similar but is about jQuery and the answer is a bad approach (guessing a hard-coded list of touchscreen user agents, which would break when new device UAs are created, and which falsely assumes all devices are mouse or touchscreen)
Preventing touch from generating mouseOver and mouseMove events in Android browser is the closest I could find, but it is only about Android, is about preventing not identifying mouseover on touch, and has no answer
Browser handling mouseover event for touch devices causes wrong click event to fire is related, but they're trying to elumate the iOS two-tap interaction pattern, and also the only answer makes that mistake of assuming that touches and mouse/clicks are mutually exclusive.
The best I can think of is to have a touch event that sets some globally accessible variable flag like, say, window.touchedRecently = true; on touchstart but not click, then removes this flag after, say, a 500ms setTimeout. This is an ugly hack though.
Note - we cannot assume that touchscreen devices have no mouse-like roving cursor or visa versa, because there are many devices that use a touchscreen and mouse-like pen that moves a cursor while hovering near the screen, or that use a touchscreen and a mouse (e.g. touchscreen laptops). More details in my answer to How do I detect whether a browser supports mouseover events?.
Note #2 - this is not a jQuery question, my events are coming from Raphael.js paths for which jQuery isn't an option and which give a plain vanilla browser event object. If there is a Raphael-specific solution I'd accept that, but it's very unlikely and a raw-javascript solution would be better.

Given the complexity of the issue, I thought it was worth detailing the issues and edge cases involved in any potential solution.
The issues:
1 - Different implementations of touch events across devices and browsers. What works for some will definitely not work for others. You only need to glance at those patrickhlauke resources to get an idea of how differently the process of tapping a touch-screen is currently handled across devices and browsers.
2 - The event handler gives no clue as to its initial trigger. You are also absolutely right in saying that the event object is identical (certainly in the vast majority of cases) between mouse events dispatched by interaction with a mouse, and mouse events dispatched by a touch interaction.
3 - Any solution to this problem which covers all devices could well be short-lived as the current W3C Recommendations do not go into enough detail on how touch/click events should be handled (https://www.w3.org/TR/touch-events/), so browsers will continue to have different implementations. It also appears that the Touch Events standards document has not changed in the past 5 years, so this isn't going to fix itself soon. https://www.w3.org/standards/history/touch-events
4 - Ideally, solutions should not use timeouts as there is no defined time from touch event to mouse event, and given the spec, there most probably won't be any time soon. Unfortunately, timeouts are almost inevitable as I will explain later.
A future solution:
In the future, the solution will probably be to use Pointer Events instead of mouse / touch events as these give us the pointerType (https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events), but unfortunately we're not there yet in terms of an established standard, and so cross-browser compatibility (https://caniuse.com/#search=pointer%20events) is poor.
How do we solve this at the moment
If we accept that:
You can't detect a touchscreen (http://www.stucox.com/blog/you-cant-detect-a-touchscreen/)
Even if we could, there's still the issue of non-touch events on a touch capable screen
Then we can only use data about the mouse event itself to determine its origin. As we've established, the browser doesn't provide this, so we need to add it ourselves. The only way to do this is using the touch events which are triggered around the same time as the mouse event.
Looking at the patrickhlauke resources again, we can make some statements:
mouseover is always followed by the click events mousedown mouseup and click - always in that order. (Sometimes separated by other events). This is backed up by the W3C recommendations: https://www.w3.org/TR/touch-events/.
For most devices / browsers, the mouseover event is always preceded by either pointerover, its MS counterpart MSPointerOver, or touchstart
The devices / browsers whose event order begins with mouseover have to be ignored. We can't establish that the mouse event was triggered by a touch event before the touch event itself has been triggered.
Given this, we could set a flag during pointerover, MSPointerOver, and touchstart, and remove it during one of the click events. This would work well, except for a handfull of cases:
event.preventDefault is called on one of the touch events - the flag will never be unset as the click events will not be called, and so any future genuine click events on this element would still be marked as a touch event
if the target element is moved during the event. The W3C Recommendations state
If the contents of the document have changed during processing of the
touch events, then the user agent may dispatch the mouse events to a
different target than the touch events.
Unfortunately this means that we will always need to use timeouts. To my knowledge there is no way of either establishing when a touch event has called event.preventDefault, nor understanding when the touch element has been moved within the DOM and the click event triggered on another element.
I think this is a fascinating scenario, so this answer will be amended shortly to contain a recommended code response. For now, I would recommend the answer provided by #ibowankenobi or the answer provided by #Manuel Otto.

What we do know is:
When the user uses no mouse
the mouseover is directly (within 800ms) fired after either a touchend or a
touchstart (if the user tapped and held).
the position of the mouseover and the touchstart/touchend are identical.
When the user uses a mouse/pen
The mouseover is fired before the touch events, even if not, the position of the mouseover will not match the touch events' position 99% of time.
Keeping these points in mind, I made a snippet, which will add a flag triggeredByTouch = true to the event if the listed conditions are met. Additionally you can add this behaviour to other mouse events or set kill = true in order to discard mouseevents triggered by touch completely.
(function (target){
var keep_ms = 1000 // how long to keep the touchevents
var kill = false // wether to kill any mouse events triggered by touch
var touchpoints = []
function registerTouch(e){
var touch = e.touches[0] || e.changedTouches[0]
var point = {x:touch.pageX,y:touch.pageY}
touchpoints.push(point)
setTimeout(function (){
// remove touchpoint from list after keep_ms
touchpoints.splice(touchpoints.indexOf(point),1)
},keep_ms)
}
function handleMouseEvent(e){
for(var i in touchpoints){
//check if mouseevent's position is (almost) identical to any previously registered touch events' positions
if(Math.abs(touchpoints[i].x-e.pageX)<2 && Math.abs(touchpoints[i].y-e.pageY)<2){
//set flag on event
e.triggeredByTouch = true
//if wanted, kill the event
if(kill){
e.cancel = true
e.returnValue = false
e.cancelBubble = true
e.preventDefault()
e.stopPropagation()
}
return
}
}
}
target.addEventListener('touchstart',registerTouch,true)
target.addEventListener('touchend',registerTouch,true)
// which mouse events to monitor
target.addEventListener('mouseover',handleMouseEvent,true)
//target.addEventListener('click',handleMouseEvent,true) - uncomment or add others if wanted
})(document)
Try it out:
function onMouseOver(e){
console.log('triggered by touch:',e.triggeredByTouch ? 'yes' : 'no')
}
(function (target){
var keep_ms = 1000 // how long to keep the touchevents
var kill = false // wether to kill any mouse events triggered by touch
var touchpoints = []
function registerTouch(e){
var touch = e.touches[0] || e.changedTouches[0]
var point = {x:touch.pageX,y:touch.pageY}
touchpoints.push(point)
setTimeout(function (){
// remove touchpoint from list after keep_ms
touchpoints.splice(touchpoints.indexOf(point),1)
},keep_ms)
}
function handleMouseEvent(e){
for(var i in touchpoints){
//check if mouseevent's position is (almost) identical to any previously registered touch events' positions
if(Math.abs(touchpoints[i].x-e.pageX)<2 && Math.abs(touchpoints[i].y-e.pageY)<2){
//set flag on event
e.triggeredByTouch = true
//if wanted, kill the event
if(kill){
e.cancel = true
e.returnValue = false
e.cancelBubble = true
e.preventDefault()
e.stopPropagation()
}
return
}
}
}
target.addEventListener('touchstart',registerTouch,true)
target.addEventListener('touchend',registerTouch,true)
// which mouse events to monitor
target.addEventListener('mouseover',handleMouseEvent,true)
//target.addEventListener('click',handleMouseEvent,true) - uncomment or add others if wanted
})(document)
a{
font-family: Helvatica, Arial;
font-size: 21pt;
}
Click me

According to https://www.html5rocks.com/en/mobile/touchandmouse/
For a single click the order of events is:
touchstart
touchmove
touchend
mouseover
mousemove
mousedown
mouseup
click
So you might be able to set some arbitrary boolean isFromTouchEvent = true; in onTouchStart() and isFromTouchEvent = false; in onClick() and check for that inside of onMouseOver(). This doesn't work very well since we're not guaranteed to get all those events in the element that we're trying to listen on.

I usually have couple of general schemes which I use for this, one of them uses a manual principle of setTimeout to trigger a property. I will explain this one here, but first try to reason about using touchstart, touchmove and touchend on touch devices and use mouseover on destop.
As you know, calling event.preventDefault (event has to be not passive for this to work with touchstart) in any of the touchevents will cancel the subsequent mousecalls so you do not need to deal with them. But in case this is not what you want, here is what I use sometimes (I refer as "library" to your dom manipulation library, and "elem" as your element):
with setTimeout
library.select(elem) //select the element
.property("_detectTouch",function(){//add a _detectTouch method that will set a property on the element for an arbitrary time
return function(){
this._touchDetected = true;
clearTimeout(this._timeout);
this._timeout = setTimeout(function(self){
self._touchDetected = false;//set this accordingly, I deal with either touch or desktop so I can make this 10000. Otherwise make it ~400ms. (iOS mouse emulation delay is around 300ms)
},10000,this);
}
}).on("click",function(){
/*some action*/
}).on("mouseover",function(){
if (this._touchDetected) {
/*coming from touch device*/
} else {
/*desktop*/
}
}).on("touchstart",function(){
this._detectTouch();//the property method as described at the beginning
toggleClass(document.body,"lock-scroll",true);//disable scroll on body by overflow-y hidden;
}).on("touchmove",function(){
disableScroll();//if the above overflow-y hidden don't work, another function to disable scroll on iOS.
}).on("touchend",function(){
library.event.preventDefault();//now we call this, if you do this on touchstart chrome will complain (unless not passive)
this._detectTouch();
var touchObj = library.event.tagetTouches && library.event.tagetTouches.length
? library.event.tagetTouches[0]
: library.event.changedTouches[0];
if (elem.contains(document.elementFromPoint(touchObj.clientX,touchObj.clientY))) {//check if we are still on the element.
this.click();//click will never be fired since default prevented, so we call it here. Alternatively add the same function ref to this event.
}
toggleClass(document.body,"lock-scroll",false);//enable scroll
enableScroll();//enableScroll
})
Another option without setTimeout is to think mousover is counter to touchstart and mouseout counter to touchend. So former events (the touch events) will set a property, if the mouse events detect that property then they do not fire and reset the property to its initial value and so on. In that case something along these lines will also do:
without setTimeout
....
.on("mouseover",function(dd,ii){
if (this._touchStarted) {//touch device
this._touchStarted = false;//set it back to false, so that next round it can fire incase touch is not detected.
return;
}
/*desktop*/
})
.on("mouseout",function(dd,ii){//same as above
if(this._touchEnded){
this._touchEnded = false;
return;
}
})
.on("touchstart",function(dd,ii){
this._touchStarted = true;
/*some action*/
})
.on("touchend",function(dd,ii){
library.event.preventDefault();//at this point emulations should not fire at all, but incase they do, we have the attached properties
this._touchEnded = true;
/*some action*/
});
I removed a lot of details but I guess this is the main idea.

You can use modernizr for that! I just tested this on a local development server and it works.
if (Modernizr.touch) {
console.log('Touch Screen');
} else {
console.log('No Touch Screen');
}
So I would start there?

Pointer Events are widely supported now. So now we can use pointerenter and check event.pointerType:
const element = document.getElementById("hoverableElement")
element.addEventListener("pointerenter", (event) => {
if (event.pointerType === "mouse") {
alert("Hovered")
}
})
<div id="hoverableElement">Trigger on hover, but not on touch</div>

Top level mouse event handler

Hm. Maybe Is that I can't figure out the correct search keywords, since I'm new in some areas of javascript.
I am making a two.js based interactive game that comprises dragging stuff around. I need to detect when a mouse is released regardless the elements that are (or aren't) over the canvas. The elements (which are SVG canvas elements) capture the mouse events and prevent the canvas mouse event detection.
Mouse events:
$("#canvas").on("mousemove", function(e){
//do stuff
}).on("mousedown",function(){
//do stuff
}).on("mouseup",function(){
//do stuff
})
So, I can either address a event handler to an object, which will happen only within that object, or address it to the canvas, which will only happen when there is no object over. Appending to both will be unelegant, and will need a major re estructuration in the code that is huge (and I admit, messy);
Example elements that steal the mouse events in the inspector
I hope not to be re-asking. I have looked up and tried for some hours. Thanks!

Ok. So I tried an approach trying to think more javascript wise. Mainly I come from the other OOP school of thought; which is why is hard to unlock my understanding of prototypical objects.
I made a global function named pointer, and other named draggable, which goes in the prototype of each object to be dragged. On this function and over any object over which things could be dragged (the canvas), I attached the functions onRelease and release. When the mouse button is released, it runs its release function, which triggers a pointer.release(). The pointer will have an array of any object being dragged, so when it receives the release, it will trigger the onRelease of each dragged element, passing the object under the mouse. So the object being dragged, at the end receives the event handling object (the one upon which mouse was released).
I hope this method doesn't produce any face-palm. If so, I'd like to learn how it was better.
var pointer={
pos:{x:0,y:0},
dragging:false,
//who will be the object that detected the mouse released. see below
mouseUp:function(who){
for(drg in this.dragging){
//look if the -being-dragged- object does have the function
if(typeof(this.dragging.onRelease)=="function")
this.dragging.onRelease(who);
this.dragging=false;
}
}
}
This is the draggable class. The last part is the only concerning one, the rest is for context purpose:
function Draggable(){
this.main=this;
if(!this.pos)
this.pos={x:0,y:0};
this.dragging=false;
this.hover=false;
this.sprite=false;
this.move=function(pos){
this.sprite.translation.x=pos.x;
this.sprite.translation.y=pos.y;
this.pos=pos;
this.moving();
}
this.moving=function(){}
this.release=function(){
pointer.mouseUp(this);
}
this.init=function(){
//fallback sprite is a circle
if(!this.sprite)
this.sprite=two.makeCircle(0,0,this.rad);
this.move(this.pos);
two.update();
this.elem=$(domElem(this.sprite));
//attach a this to the dom element to make back-scope
this.elem[0].main=this;
//append jquery functions to this object's dom sprite
//pendiente: this may need to go in the pointer object, isn't it?
this.elem.on("mouseenter",function(){
this.main.sprite.fill="rgba(127,127,255,0.7)";
this.main.hover=true;
}).on("mouseleave",function(){
this.main.sprite.fill="rgba(127,127,255,0.3)";
this.main.hover=false;
//avoid pieces stuck to mouse. should this be?
/*this.main.dragging=false;
this.main.release();
pointer.dragging=false;*/
}).on("mousedown",function(){
this.main.dragging=this.main.hover;
pointer.dragging=this.main;
}).on("mouseup",function(){
//the important part is here: it triggers an pointer.mouseUp
this.main.dragging=false;
this.main.release();
pointer.mouseUp(this);
});
}
};
And so the node which will be prototype-blended with the draggable
function Node(ind){
//just to make more console-friendly
this.name="node"+ind;
this.pos=a;
this.ind=ind;
this.par=par;
this.broc;
this.sprite=two.makeCircle(0,0,brocSize*1.2);
this.sprite.addTo(layer[2]);
this.$elem=$(domElem(this.sprite));
main=this;
//these are triggered by their draggable bit
//who, is the subject over which mouse was released
this.onRelease=function(who){
//if(typeof(who)=="Broc")
console.log(who);
this.move(this.broc.pos);
console.log("this:");
console.log(this);
}
//pendant: make the abspos function once an unpack
this.son=false;
this.active=false;
};
This implements a bit of jQuery, which may later be replaced by plain javascript, for prototype and learn purposes I feel more comfortable with jQuery.

Raphaeljs: How to get the elements reference back using event.target?

Currently I have an small application for drawing shapes.
Here is an example including my problem: http://jsfiddle.net/auyaC/
I get the error: Uncaught TypeError: Object [object Object] has no method 'getBBox'
Below stripped code where the error comes from
When the user clicks on a shape, I catch the event.target
var onMouseDown = function(event) {
setBBoxes($(event.target)); // Seems OK
};
I want the BBoxes back again but my shape has lost the BBox..
var setBBoxes = function(shape) {
shape.getBBox(); // Unable.. getBBox is part of Raphael shapes, but mine is not the real reference?
};
And a stripped example: http://jsfiddle.net/auyaC/2/
Edit
Ok so my problem was mixing up jQuery and Raphaeljs, because I am unable to use the mouse events of Raphael.
It seem that none of the examples online using mouse events or touch events work.
I have read these issue reports
https://github.com/DmitryBaranovskiy/raphael/issues/720
https://github.com/DmitryBaranovskiy/raphael/pull/737
Also Windows thinks I have touch input available for 255 touch points.
But I don't have a touchscreen anymore (had one but changed screen and deleted drivers).
So for me, even http://jsfiddle.net/5BPXD doesn't work on my computer...

You generally do not want to mix jQuery and Raphael like this, as it's easy to get confused about which library's event handlers and methods you're using. You also lose Raphael's fallback capabilities for old browsers when you start directly messing with the DOM elements that Raphael creates.
In this case, I recommend adding the .mousedown() listener directly to the Raphael element.
var paper = new Raphael($(".testarea")[0], $(".testarea").width(), $(".testarea").height());
var circAttr = {
"fill": "#4ba6e8",
"stroke": "#1a81cc",
"stroke-width": "2"
};
paper.circle(200, 200, 80).attr(circAttr).mousedown(function() {
someFunction(this);
});
var someFunction = function(shape) {
console.log(shape.getBBox());
};
Updated fiddle: http://jsfiddle.net/auyaC/3/
Of course, you lose the ability to select all the shapes at once with a selector and add the event to all of them at once. You'll need to add the mousedown event to each one as it's created. Small tradeoff, I think.

I've finally found the fix for my bug...
It seem that Raphael thought that I had a touch screen.
The "Tablet PC Components" Windows feature was turned on. After disabling this feature, I was able to use the mouse and touch events again!

add event listener on elements created dynamically

Is possible to add event listener (Javascript) to all dynamically generated elements?
I'm not the owner of the page, so I cannot add a listener in a static way.
For all the elements created when the page loaded I use:
doc.body.addEventListener('click', function(e){
//my code
},true);
I need a method to call this code when new elements appear on the page, but I cannot use jQuery (delegate, on, etc cannot work in my project). How can I do this?

It sounds like you need to pursue a delegation strategy without falling back to a library. I've posted some sample code in a Fiddle here: http://jsfiddle.net/founddrama/ggMUn/
The gist of it is to use the target on the event object to look for the elements you're interested in, and respond accordingly. Something like:
document.querySelector('body').addEventListener('click', function(event) {
if (event.target.tagName.toLowerCase() === 'li') {
// do your action on your 'li' or whatever it is you're listening for
}
});
CAVEATS! The example Fiddle only includes code for the standards-compliant browsers (i.e., IE9+, and pretty much every version of everyone else) If you need to support "old IE's" attachEvent, then you'll want to also provide your own custom wrapper around the proper native functions. (There are lots of good discussions out there about this; I like the solution Nicholas Zakas provides in his book Professional JavaScript for Web Developers.)

Depends on how you add new elements.
If you add using createElement, you can try this:
var btn = document.createElement("button");
btn.addEventListener('click', masterEventHandler, false);
document.body.appendChild(btn);
Then you can use masterEventHandler() to handle all clicks.

An obscure problem worth noting here may also be this fact I just discovered:
If an element has z-index set to -1 or smaller, you may think the
listener is not being bound, when in fact it is, but the browser
thinks you are clicking on a higher z-index element.
The problem, in this case, is not that the listener isn't bound, but instead it isn't able to get the focus, because something else (e.g., perhaps a hidden element) is on top of your element, and that what get's the focus instead (meaning: the event is not being triggered). Fortunately, you can detect this easily enough by right-clicking the element, selecting 'inspect' and checking to see if what you clicked on is what is being "inspected".
I am using Chrome, and I don't know if other browsers are so affected. But, it was hard to find because functionally, it resembles in most ways the problem with the listener not being bound. I fixed it by removing from CSS the line: z-index:-1;

When you have to support only "modern" web browsers (not Microsoft Internet Explorer), mutation observers are the right tool for this task:
new MutationObserver(function(mutationsList, observer) {
for(const mutation of mutationsList) {
if (mutation.type === 'childList') {
// put your own source code here
}
}
}).observe(document.body, {childList: true, subtree: true});

I have created a small function to add dynamic event listeners, similar to jQuery.on().
It uses the same idea as the accepted answer, only that it uses the Element.matches() method to check if the target matches the given selector string.
addDynamicEventListener(document.body, 'click', '.myClass, li', function (e) {
console.log('Clicked', e.target.innerText);
});
You can get if from github.

Delegating the anonymous task to dynamically created HTML elements with event.target.classList.contains('someClass')
returns true or false
eg.
let myEvnt = document.createElement('span');
myEvnt.setAttribute('class', 'someClass');
myEvnt.addEventListener('click', e => {
if(event.target.classList.contains('someClass')){
console.log(${event.currentTarget.classList})
}})
Reference: https://gomakethings.com/attaching-multiple-elements-to-a-single-event-listener-in-vanilla-js/
Good Read: https://eloquentjavascript.net/15_event.html#h_NEhx0cDpml
MDN : https://developer.mozilla.org/en-US/docs/Web/API/Event/Comparison_of_Event_Targets
Insertion Points:

You might wanna take a look at this library: https://github.com/Financial-Times/ftdomdelegate which is 1,8K gzipped
It is made for binding to events on all target elements matching the given selector, irrespective of whether anything exists in the DOM at registration time or not.
You need to import the script and then instantiate it like that:
var delegate = new Delegate(document.body);
delegate.on('click', 'button', handleButtonClicks);
// Listen to all touch move
// events that reach the body
delegate.on('touchmove', handleTouchMove);
});

Use classList property to bind more than one class at a time
var container = document.getElementById("table");
container.classList.add("row", "oddrow", "firstrow");

javascript dragging a file from desktop: dragenter / dragleave triggers uncorrectly

Made a fiddle for this: http://jsfiddle.net/terjeto/MN4FJ/
My problem is that dragleave fires when you drag a file from desktop into the box and over the text inside the box. (drag a file into box will make the border solid -> drag the file over the text inside the box and the border will be dashed:->which is not what I want).
Is this a browser bug? (firefox 9#win).
I also put in a box for mouse up/down which works just fine so you can compare the two.
How can I achieve the correct dragenter / dragleave behaviour?
PS. I bind to body because I need the event-delegation in my real app.

This is a well documented shortcomming of the spec.
As Peter-Paul Koch points out here
A function like this might help you work out if the target element is a child of the target area that you want to drop the file onto.
function isChildElement(parent, child) {
var childParent = child;
while (childParent) {
if (childParent == parent) {
return true;
}
childParent = childParent.parentNode;
}
return false;
},

I've written a little library called Dragster to help me deal with this issue, it works everywhere except IE (where it just does nothing).

The issue is relatively well known, but solutions are all pretty 'hacky'. I came across a workaround that fixes it in my case and should be adaptable for most situations.
I listen for dragenter events on the container (a box) of my possible dropzones. Events fire whenever the drag moves from one element to another and bubble to the container. When the target is one of my drop zones (or possibly a child within the drop zone but that wasn't necessary in my case since you can't get to the children without entering the surrounding box first) then I set the droppable highlighting, just as normal.
When the dragenter event fires on the container itself then I remove the highlighting from the previous element because I must have left it. For a dragenter event, the element that was highlighted is the relatedTarget so it is easy to find and there is no need for a dragleave event listener.
Note that you may have the remove the highlighting explicitly following a drop, depending on your exact drop logic.

I had the same problem and finally figured out a stable solution. Here is a plugin called draghover, which works cross browsers. Check it out here: https://github.com/bingjie2680/jquery-draghover