Issue with mousedown and mouseup event handlers - javascript

I have a drag and drop functionality on a page. I have defined a mousedown, mousemove, and mouseup event handlers to do it. However, sometimes, in the browser (I haven't been able to narrow it down to one because it has happened on all of them at some point), when the user clicks (and lets go) on the object to drag, he is now dragging the object and has to click again (and let go) to release the object.
The intended functionality is for the user to click down and hold while dragging, letting go of the click only when he wants to release the object he is dragging. Is there something I can add inside the mousemove handler to check if the mousedown is still active?

It's old but it may still help you I guess. Otherwise just use jQueryUI Drag'n'Drop-Plugin.
JavaScript: Check if mouse button down?

Related

"mouseDown" event does not triggered on "click" In Mapbox-gl in a scenario

Good day,
In mapbox gl js latest version, I bind a couple of events like click, mousedown, mouseup and mousemove.
In mobile device, if I click, the following order of event should occur:
"mouseMove"(First)
"mouseDown"
"mouseUp"
"click"(Last)
However, in some case's only mouseMove event is occurring. I noticed that this happens only when mapboxgl popup is added on Map and my mouse cursor is above it.
It seems like in mobile when I click on the marker, firstly "mouseMove" event gets called, which shows the popup. but then the rest of the events("mouseDown", "mouseUp" and "click") gets called on popup instead and not the map.
I am confused, How can I call the callbacks that are bind on Map(MapEvents) directly?
The one hack I can do is to add setTimeout delay, so that event could go down to map first and then add popup. But I really hope, if there could be a better way of achieving this.
Any suggestion would be helpful.
Codepen(Request to please open in chrome mobile device emulator)
https://codepen.io/dollysingh3192/pen/QWKzdbO
Also, added a giphy at Dropbox(Edit with offset). Have a look!
https://www.dropbox.com/s/87bq7t762s6t6qw/Jan-17-2021%2000-13-36.mp4?dl=0

Detect User Mouse Moves Outside and Inside the Browser

I want to detect user if he is not using his computer by tracking mouse events? Do you know How can I achieve this using JQuery or Javascript?
Not sure tracking mouse movements outside the browser is possible. You track this type of thing by using event listeners and mounting the listener to an html element. in your case you would mount a mousemove listener to the window to track movement across the whole page. But outside of the browser window their is nothing that JS can mount an event listener to their for leaving no option to track mouse movement outside the browser. (could be wrong though, seems creepy if its possible)

mouseup event is not fired when you release button on another element or somewhere outside

I have two div elements. When I press mouse button on one of them, then move mouse to another one or just somewhere else and then release the button, mouseup event is not fired. It is actually fired, but only for the first several random times (usually 1…10). Then it stops. Mouse curser turns to a stop sign and only mousedown event is fired.
I tried to add mouseup eventlistener to document.documentElement and document element as it was suggested here but it did not help. Mouse curser is still turning to a stop sign after several successful mouseups and does not fire until page is reloaded.
It still fires perfectly if you release the button on the same element.
How to make mouseup event to be fired always when mouse button is released disregarding where you have started and finished? It is crucial for my program.
I checked it in Chrome. In Firefox it works almost the same, but the number of possible mouseup events on another then started element is little bit more (up to 20). Then the same stop sign appears.
Here is a screenshot
Here is a JSFiddle
I have found Solution!!!
This topic was very much helpful.
So why does the browser shows stop sign when you move the mouse with pressed button? Because it thinks you are trying to drag this element! But why it does not protest when you do it for the first (or several first) time? Because pressing mouse first time you....just select this element. Then you try to drag it and only this draws a protest of the browser and it shows stop sign. During showing stop sign browser cannot fire any mouse events.
So how to prevent browser from thinking you are going to select and drag this element. It’s very simple. Just add -webkit-user-select: none; in the CSS for this element (it’s for Chrome, for Firefox the prefix will be -moz- and so on).
Now all mouse events will work disregarding when, why and in which order mouse buttons were pressed!
Here is a JSFiddle

Which touch event should e.preventDefault() be called in to cancel a "click" on a touch device?

To prevent a click from firing, you can call e.preventDefault() in a click event handler. This lets you bind an event to mousedown, see if something happens like the mouse moving a certain distance, and if so, prevent the click when the mouse button is released.
A click handler with e.preventDefault() does not seem to prevent a click on certain touch devices however. (I am testing on an iPad mini). I have also tried calling e.preventDefault() in the touchend handler, which seems to do nothing.
Calling e.preventDefault() in the touchstart blocks the page from scrolling, and is also useless because it is too early to tell if the click should be cancelled. Only touchmove can decide if a cancel needs to occur.
The issue is, when a user drags a draggable element which is also a link, it needs to cancel the "click" of the link on fingerup. This works just fine on a desktop by cancelling the click event.
Is there an equivalent event I can cancel that stops an "armed click" from going off once the user lifts their finger up?
iOS is known to not register the click event property. This is likely due to the fact that iOS waits a little longer to determine how a click should be interpreted as:
the start of a pinching/zooming gesture
two or multiple-finger panning
the start of scrolling
the start of double tapping
a simple tap event (which we are trying to capture)
the start of touch-and-hold
Therefore, you can listen to the tap event instead, included in jQuery Mobile.
The jQuery Mobile tap event triggers after a quick, complete touch
event that occurs on a single target object. It is the gesture
equivalent of a standard click event that is triggered on the release
state of the touch gesture.
The tap event is not native, because it relies on conditionally listening upon touchstart to determine if the start and stop targets are the same: if so, jQuery Mobiel determines that it is indeed a genuine tap event and fires the custom, non-native event tap. This logic can be seen in the original source file, at line 75 onwards of ./js/events/touch.js.
An example usage is as follow:
$(selector).on('tap', function(e){
e.preventDefault();
});

Determine what triggered focus event?

I need to determine what caused a focus event.
Ideally, I want to differentiate between a click, a tab/keyboard input, and a manual (via code) trigger.
How can I do this?
I'm looking at the event object, but I'm not seeing anything too useful.
If the focus comes from a $x.focus() call, then the event won't have an originalEvent property because there was no event from the browser so:
if(ev.hasOwnProperty('originalEvent')) {
// Focus event was manually triggered.
}
To differentiate between keyboard and mouse based focus events, you could try binding a keydown handler to everything else to detect a Tab or Shift-Tab but that would be a gross hack and probably not reliable; for example, on an iPad, you don't hit Tab to move to the next field, you hit Next or Previous in the popup keyboard to move around and those may not register as key presses at all.
There's a similar question about click events that might be of interest as well:
In jQuery, how can I tell between a programmatic and user click?
As you note in the comments, you could trap click events to detect a mouse-based focus change and set a flag somewhere to remember it. Then you'd have this:
If there is no originalEvent in the jQuery event then the focus change was triggered manually (i.e. $x.focus() or similar).
If the click handler flag is set then the focus change came from a mouse action.
Otherwise the focus change came from a keyboard event.
You'd have to be careful that your click and focus events came in the right order and you'd need to make sure the flag was cleared when you're done with it. This might not be bullet proof but maybe it doesn't need to be.

Categories