How to handle the click event, even if the item moves from under the cursor between mousedown and mouseup?

Question

I have <input> and <button> .

The input has an onblur event onblur , which (sometimes) causes the <button> to be moved; if with the focus on <input> user goes to <button> (and thus, he moves from under the pointer until the click is complete), they should currently move the pointer to a new folder and click a second time. This experience is suboptimal.

I would like users to click on <button> only once (but should keep the functionality of the button moving when the <input> loses focus). However, if the user moves the mouse cursor over the button and then moves the mouse cursor (including switching focus from the application) before clicking the mouse, there is no need to trigger a click event (as usual).

I do not see any approach based on processing onmousedown and / or onmouseup that would not be error prone in some cases. All I can think of is to force the cursor to move in the onblur handler so that the click completes (if is it really so?) - but this is probably a bad user experience.

How is this best handled?

 $('button').click( $('<li><input></li>') .children('input') .blur(function(){ if (!this.value.length) this.parentElement.remove(); }) .end(), function(e){ e.data.clone(true) .appendTo($(this).data('target')) .children('input') .focus(); } ); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> List 1<button data-target="#list1">+</button><ul id="list1"></ul> List 2<button data-target="#list2">+</button><ul id="list2"></ul> 

Answer 1

One approach is to squeeze an element out of, say, a second, and not immediately, which gives the user time to complete the click before the button moves:

 $(this.parentElement).fadeOut("slow", function() { $(this).remove(); }); 

Live example:

 $('button').click( $('<li><input></li>') .children('input') .blur(function(){ if (!this.value.length) $(this.parentElement).fadeOut("slow", function() { $(this).remove(); }); }) .end(), function(e){ e.data.clone(true) .appendTo($(this).data('target')) .children('input') .focus(); } ); 

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> List 1<button data-target="#list1">+</button><ul id="list1"></ul> List 2<button data-target="#list2">+</button><ul id="list2"></ul> 

However, I think I will try to find a way that the space between the list items has not changed at all, because it still means that everything is moving, just at a different time - I hope the user will worry less about it at that time, but ... In this case, it is difficult due to the fact that the lists are on top of each other - the second list will move at some point. If you made it so that the user always needs to enter an input window, then the second list will simply move at a different time (when it has a value, and you add a new empty one for the next value). It can be done with a fixed list size and scroll inside, but it depends on the overall design.