Is there any (css or dom) property that could be set on a DIV element or any other clean/standard way to avoid firing a click event when the mouse is moved after the mousedown?
Suppose there is one div element within another div. The goal is to prevent the click event on the parent also when the mouse is moved on its (smaller) descendant (to avoid event handling on descendants).
With no prevention, mousedown + mousemove + mouseup fires a click event.
The goal is either kind of mousemove "aborts" the mousedown on the element or prevents the click after mouseup
Related
I have a table where i have bound all my elements with class="shift" to a click function.
Now, because I also need to use another click event on part of the element, I would like to unbind the click event on element when the mouse enters the element and rebind when i leaves (meant for some touch events and whatnot)
Now, I bind like this
$("table").on("touchstart mousedown",".shift", function(e){ ... })
But when i try to unbind on a specific element, say it has a class="selected" added to distinguish the current element i use:
$("table").off("touchstart mousedown",".shift.selected")
which does not work....
I can remove all the handlers at once, but it would be wasteful to remove all the handlers and reinsert them as soon as the mouse leaves.
So, is there a way to remove the handler on a single element after the event is bound to all current and future elements?
Thanks in advance!
You don't need to unbind the click event on the element when the mouse enters. I know, the element click event will trigger when you click an inner element with the click event bound, right ? you can stop that:
The click handler of the inner element must look like this:
$("some inner element").click(function(event) {
//That's what are you looking for ;)
event.stopPropagation();
//You code here
});
event.stopPropagation() will prevent the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
When a user clicks on a HTML element, it seems a number of JavaScript events other than just "click" are fired. For example, clicking on a input/text element also triggers events like focus, mousedown, mouseup, etc...
Essentially, when a human clicks on an element, what are all the events that get fired? (besides click!)
For the specific button click, there will be:
mousedown
mouseup
click
If the mouse entered a new element in the period you are looking you may also see:
mousemove
mouseover
mouseenter
mouseleave (on other element)
mouseout (on other element)
If the focus changes based on the click:
focusout (on some other element)
blur (on some other element)
focusin
focus
You can see an exact sequence of events in this jsFiddle that logs all the events: https://jsfiddle.net/jfriend00/r9c7n5j2/
If the focus is elsewhere and you click into an input tag, you will see this sequence of events (for clarity, only one mousemove event is shown, but there will likely be many):
mouseover
mouseenter
mousemove
mousedown
focus
focusin
mouseup
click
Note: focusin is not yet supported in Firefox.
Check out this bit in the w3:
Should be what you're looking for. Also MDN has a good overview of them
I have document.addEventListener('mousedown', ...) performing some visual feedback to the user. But I also have dynamicaly created elements with elem.addEventListener('click') which are not fired. If I remove document mousedown listener then clicks on elements are triggered (or if I change document's mousedown to click event). Why is that and how to solve this? I would realy need document to handle mousedown and still be able for elements to recieve their click/tap events.
FIDDLE: http://codepen.io/hpet/pen/izpJK
if you uncomment document mousedown event, element receives click ok, otherwise click on element is never triggered.
Fiddle updated. Uncomment lines 22/23 (setting position) will not fire click event.
The root cause of your problem is overlapping elements.
Since you're moving the circle element on top of the square element in your mousedown handler, the subsequent mouseup event will be triggered on the circle. Since that event was not triggered on the square element, no click event will be generated.
If you have to keep the circle element on top of the square, you can use the pointer-events CSS rule to force mouse events to "go through" the circle element.
There is a textarea element which converts itself into a div when onblur event happens on that same textarea. There is also a button which has its onclick property set to function f.
If one is writing in the textarea and then clicks on a button, f is fired, but also onblur event handler is triggered. Is there some order rules in this case, or the two handler functions may fire in random order?
I created a jsfiddle here: http://jsfiddle.net/z5SEp/
The events for latest Chrome seem to be:
mousedown
blur
mouseup
click
Although I could not find any documentation to rely on, it would make sense to me that blur is fired after mousedown, but before mouseup. Mousedown causes blur, but you could leave your mouse button down for an extended period of time and still cause a blur.
The order of click events will always be 1. mousedown 2. mouseup 3. click. The blur makes sense to be after mousedown but before mouseup.
More things to keep in mind
If you trigger the button click like this: $('button').trigger('click');, then the blur event will not fire, and focus will remain on the textarea.
In this scenario, the blur will always fire first because blur is triggered as soon as the mouse button goes down elsewhere on the page. So when the mouse goes down on your button, the textarea's blur event is fired first. As the mouse comes up, the button's click event is fired.
When the mouse hovers into the inner element, the mouseOut event for the outer element is fired first, then the mouseOver element for inner element is fired, then the mouseOver element for the inner element is fired last.
Why does this happen? Because the inner element technically is still inside of the outer element, so the mouse doesn't leave the outer element when it moves into the inner element. Is there a way to prevent that?
Full example here: http://jsfiddle.net/pMCeu/4/
To avoid this you should use mouseenter and mouseleave instead of mouseover and mouseout.
It is due to event bubbling. take a look at this post for a little more info.
Hi the solution above is correct and complete.
but you can also use mousemove event