I am in a situation where I need jQuery's mouseover event to be fired when an element (in this case an image) moves under the mouse, so unlike the common situation is an element that is moving, not the mouse.
Do you know of any library/gist/technology that could help me in this sense?
I've tried with flash but with no luck, is this something than can actually be done?
You can track mouse position by binding a handler to mousemove on the body, and calculate after every move of the image whether the pointer is over it.
I ran across a similar issue. In my case I did a "good enough" workaround by keeping track of the time the mouse last moved and then in the mouseover handler seeing if the mouse had moved recently -- within 30ms of the current time. That way I can bail out in cases where the mouse didn't actually move, but I don't have to test the hitboxes myself -- something very hard to do right and fast, and fortunately something I can leave to the browser by doing this.
Related
I wrote a live demo to show this problem:
http://cssdeck.com/labs/wcczap11
If you move mouse fast between the blue, red and green areas, you will see red 'y' logs are not appear between x and z logs, which means you can't get the red area mouse events.
This is what I want:
But when mouse moves too fast:
I just want to know is there a way that no matter how fast I move the mouse the result will always be the same with the first image?
I'm not completely certain if it affects javascript, but different mice have different polling rates (measured in Hz) and if your mouse is 1000hz and you move 1000px at a constant velocity you should pick up every pixel.
However in reality we move the mouse very fast to begin and slow down as we approach a target to improve accuracy. meaning the first 700ish pixels will have been moved faster than the 700hz could poll and so you're missing values where the mouse moved more than 1px in 1hz.
That's kinda of a dumbed down version (mainly because I don't know everything about it) but basically small-hit-targets are prone to being missed by mousing events.
You could attempt to make target-areas larger, but it still won't fix everything :)
The problem here is a simple one.
The events aren't being "lost" as such. They are never actually triggering in the first place: due to the speed of transit, at no point is the browser picking up the pointer as being "over". If that's the case, then it can't trigger "out" either, as it was never viewed as being "in" in the first place.
It doesn't get lost. It comes and goes but you cant see because you move the mouse too fast. And in your example it is not lost.
Calling a callback that takes too long to execute can cause the browser to skip a poll until the next polling tick (Have you ever seen the [Violation] 'message' handler took 326ms console messages?). You're using jQuery to attach the event handlers (and I don't know much about jQuery), so there's a chance that the event handlers aren't passive.
No jQuery possible.
How to disable / stop mouse movement with JavaScript?
What to do: If the mouse is being moved to, let's say, position left < 300, disable ouse movement to prevent further moving into this direction.
Is that possible?
The Pointer Lock API might be what you're looking for
https://developer.mozilla.org/en-US/docs/API/Pointer_Lock_API
Javascript can read mouse position but not set it. The mouse cursor properties exist outside the HTML Document Object Model and thus are beyond the reach of Javascript. Mouse events however are captured and thus readable / event modification also permissible (mouse hover, mouse over, mouse out, mouse click, dblclick).
You cannot do this with JavaScript and I dare say you never will be able to.
If you need to do this for some kind of game element, for example, I recommend that you place a page-element under the mouse and prevent the page-element from moving outside of the bounds even if the mouse does.
On iPad the vmousemove event is triggered even when no move has been performed. Why's that?
Steps to reproduce:
Open http://jsfiddle.net/dcbV7/
Tap A div then B. Only tap them, but fast
Result: you see vmousemove event is triggered
vmousemove simulates the movement of a mouse. It would be as if you clicked A div, moved the mouse to B, then clicked it. There would be no other way to get a mouse from one to the other, after all.
If you try this on a device with a mouse, you'll notice that vmousemove is triggered every time the mouse is actually moved. The best heuristic they have for mouse-less environments is that touching two points close together in a short amount of time is similar to doing the same with a mouse.
I have a little mouse effect which draws on a canvas, however when the mouse intersects with another dom element the browser has issues and doesnt cleanly follow the mouse, instead it gets confused and throws the co-ordinates off causing the effect to be unstable.
I have tried attaching the listener to the cnvas, the document and the window as my initial thought was to do with other events bubbling up and throwing things off but... no dice.
Have a look here and move your mouse over the edges of the layer:
http://jsbin.com/ofosur/9/edit#javascript,html,live
also it gets even stranger with a bit of rotaion added to the div:
http://jsbin.com/ofosur/8/edit#javascript,html,live
Thank you very much indeed for any help at all!
This function is getting called when the mouse enters that internal space which is restarting the brush stroke....
function onCanvasMouseOver(event) {
strokestart(event.clientX, event.clientY);
comment out strokestart and it seems to work. hth
I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.