This question has been probably asked many times but I can't actually find the answer nor here nor on Google. Probably I'm searching it with wrong words, so I decided to ask here on StackOverflow.
I'm using Hammer.js to handle the mobile gestures on the current website and what I'd like to do now is moving the divs horizontally as much as the thumb moves (like the Facebook's app gallery, for example).
I thought I can achieve it getting the coordinates X,Y of the point where the swipe event is recognized and then animate the move between the current viewport and the next "overflow hidden" div. What I'm missing is: which is the event listener that would listen at every thumb move so that I can calculate the distance in pixel between the current point and the starting point, automatically updating the value for the animate function?
the event you are looking for is touchmove
I'm creating a custom scrolling control using HTML's Canvas that behaves a little like a spreadsheet grid. I have most standard cursor control behaviors set up, including using the mouse or arrow keys to extend the selection.
What I'd like to do next is allow the user to extend the selection by clicking and dragging off the canvas. I don't need help with the actual code, but I'd like to know if anyone has programmed something like this before, and if so, how did they approach it? Here are the ways I can think of:
Track the mouse's general direction while over the control, and on mouseLeave+mouseDown set up a timer to scroll that direction until mouseEnter+mouseDown
Determine the last location of the mouse before mouseLeave+mouseDown and use that to determine scroll direction
Start a slow scroll when mouse is within a few pixels of an edge (which edge determines direction) and then scroll faster on mouseLeave+mouseDown
Somehow involve window.mouseMove (instead of canvas.mouseMove) and track it that way (which seems really ugly to me)
Something else I'm missing that will seem really obvious in retrospect
I can handle the code, I just want to figure out the best conceptual approach to take. Ideally, I'd love to handle extending the selection diagonally (scrolling right and down simultaneously, or at least alternating between the two so it appears that way), but that's not a deal breaker.
You can use .setCapture to let your canvas continue to get mouse events even when the mouse is moved outside the canvas:
https://developer.mozilla.org/en-US/docs/Web/API/Element.setCapture
i am making a bookmarklet in the bookmarklet i am adding a iframe to the page's body.
i need to find the current mouse position to position the iframe accordingly.
The issue is. i cannot bind on click for the bookmarklet because by the time the script within the href="javascript:" runs the click was already done. so i cannot get the event there.
i thought of binding mousemove, but that's a ugly workaround.
so is there a way to get mouse's current x/y ? without an event firing ?
Thanks.
Javascript is a language to add client side functionality on user interaction. Therefore, a javascript code snippet is always run as response to an event.
I would suggest using the onmousemove event. The event would be raised each time the cursor mouse would change. Therefore, you will know the mouse position at all times.
Hope I helped!
Have you tried something like setTimeOut()?
As far as I can tell you, there is no way to see the mouse position without using an Event object to do that.
Please, take a look at this thread:
Javascript - Track mouse position
I was trying to answer an issue with custom drop down, but challenged by an inconsistent behavior in Chrome and Firefox.
DEMO: http://jsfiddle.net/fyeht/ [Added scroll event for more clarity]
See below image, The list items can be navigated using arrow keys.
To Reproduce the issue:
Open console in Chrome (F12)
Click on an item in the list (you would notice some events getting logged in the console)
Use down arrow key to navigate to the next item in the list
Finally, the issue is noticed when you reach the last item in the view and hitting down arrow would scroll. Check the log to see 'scroll', 'mouse enter' and 'mouse move' [check the new demo]
The issue is after reaching the end of items in view, it scrolls. Even though the mouse is untouched, it triggers mouseenter and mousemove events in Chrome. In FF, on scroll it triggers just the mouseenter which make sense.
Question(s):
Why is mousemove triggered when mouse is untouched?
Is this just browser inconsistency? Could not find documentation on events triggered when scrolling? (never knew it did)
Submitted a bug report: https://code.google.com/p/chromium/issues/detail?id=241476
In your example, I see that both Chrome and FF are firing mouseenter DOM events whenever the mouse is left hovering over the <ul> and pressing the key down triggers the browser to scroll in order to bring the selected <li> into view.
However, only Chrome is additionally triggering mousemove events. One obvious difference already in the mouseenter event objects that the two throw is that for Chrome, MouseEvent.offsetX and MouseEvent.offsetY values are included, whereas in FF these properties are undefined. So, when that enter is triggered Chrome has already decided the mouse "has moved".
Since the MouseEvent.screenX and MouseEvent.screenY event context values do not change between scroll-triggered MouseEvent instances, one could perhaps distinguish between an "artificial" mouseenter / mousemove event and an "authentic" one by storing these values from prior events.
DOM Event Specification
The DOM Level 2 Event Specification for mousemove reads:
The mousemove event occurs when the pointing device is moved while it is over an element.
The Level 3 spec (working draft) is essentially the same:
A user agent must dispatch this event when a pointing device is moved while it is over an element.
Seems like it could down to whether one interprets "is moved" relatively or not.
Also, in the section of the Level 3 spec on mouse event order, it states that when a pointer is moved into an element, it triggers mouseover, mouseenter, and mousemove, in that order. Every case that is specified there always has those three together, so perhaps one might interpret it that if you are going to trigger the mouseenter event, you should also be triggering the mousemove event which corresponds to entering the element.
This is a nice demo.
In Chrome mouse movement for elements is definitely relative. In chrome I can get keydown and scroll events only if the mouse pointer is over the scroll bar. I can also get scroll only events if i use the wheel to scroll and leave the mouse over the scroll bar. It is and isn't very odd that scroll by dragging causes "mouse move", and "mouse over" events.
Not only are mouse move and mouse over events produced in profusion by the browser they are not a very good indication of a users intent. Infact these events are a useful entropy source.
To the degree that there are some minor differences this is in the context of how useful these "micro events" are individually. To work with them you must devise a way to filter them for user intention you want to link to higher level actions. Any reasonable method you choose to make sense of these events will probably detect these move - on scroll events as garbage. This is where your point is really worth noting and taking under consternation.
A first stage would be to Filter out events based on the elements and values of coordinates. It might help to create a state machine model. You might register and registered handlers in response to other events. You've identified this case where you'd want to change responsive state if or reaction criteria if a key element has a scroll bar. IF an element or it's parent has a vertical scroll bar throw out mouse moves with relatively high X values.
You might want to also ignore mouse overs if it's fired with a mouse move in that context. It starts to become impractical to handle each of these micro event one at a time even if you are changing state by registering or deregistering handlers. More information can be extracted by creating an event sequence fifo buffer.
Register event handlers to add a new event to the buffer. You might also want to collect information from timer events in this buffer to establish more context. You might create an object that keeps a fifo in an array. This would be like a queue but not in the sense of it being a place where the events are waiting to be processed. Instead your program is waiting to calculate patterns in the buffer and based on the patterns fire higher level events, accept or reject different types of events and extend, contract or save the contents of the buffer. You can then evaluate move events for changes in x and y and also create conditions given the patter of scroll mouse over and mouse move events you've demonstrated.
I really doubt there's a browser inconsistency here. You should create a mousemove event that prints out the x and y coordinate. You'll probably see that the mouse has indeed moved a little bit. If that's the case, try using the plugin hoverIntent to eliminate issues like this.
EDIT:
Using the up and down arrow keys, I'm now able to replicate the issue. Yeah, it sure looks like some kind of bug! I bet the mousemove coordinate delta is tiny. Maybe the cursor moves one or two pixels? I would say, to overcome this, add a check to the mousemove function that compares previous mousemove's x-y coordinates to the current mousemove's x-y coordinates. Determine if it's more than just a few pixels. If so, you know it's a real mousemove. If it's less, you can chalk that up as a chrome bug.
FURTHER EDIT:
It seems like you uncovered a bug where mousemove is being fired in chrome when it probably shouldn't be. There may be workarounds that you could figure out if you hack it enough. But the best solution might be just to avoid using mousemove in this situation. In general, mousemove is one of those expensive events that should be used only when you really need it.
This is not a bug. The mousemove is relative to element that the event is attached to. In your case, you see that your mouse is not moving because you took the browser window as the reference. But for that scrolling list, whenever the list is scrolled, the mouse pointing over some element of the list moved to over different element
Imagine that you as the Earth, a cup of coffee stand still on a table as the mouse, the scrollable list as the Sun : if you (window) don't move, the position of the cup of coffee (mouse) is at the same place for you; but for the Sun (list), it will see that the Earth and the cup of coffee are both moving.
For years I have had a problem using javascript and jquery to control things like homemade scrollbars. I use mousedown to set a "dragging" variable to true, save the initial mouse position, and then use mousemove to track the mouse and set the div position. I condition everything on "dragging" so that once the user lets go of the mouse, or moves far enough away, then "dragging" is cleared and everything stops tracking.
The problem is, I have trouble finding out for sure when they let go of the mouse. I use mouseup and mouseout of course, but this has two problems. One is that I want the user to be able to wander outside the div being scrolled a small amount, like 10 pixels, without losing the tracking. The other problem is that sometimes I miss an event and "dragging" stays set and the mouse gets "stuck to the div" and they have problems letting go.
I need a solution. It can either be some plugin or a coding technique. I have used a number of different techniques over the years but I've never gotten a simple perfect solution.