Drag or Edit, in a single click? - javascript

I have divs, which are made to textinput fields by a plugin. Also those divs are draggable.
Right now, I have reached, that if you drag the div, it gets dragged, and if you just click on it, it gets a ".focus()".
The problem is now, that if I click it once, i get a focus on it. But the cursor jumps to the beginning of the line.
What I want, is the cursor on the place, I clicked.
How can I do this with jquery? Thanks
EDIT (My JS Code):
$('.mydiv').click(function(){
//actually, it does not focus on "$(this)" but on a div inside ".mydiv" which
//is generated by the plugin
$(this).focus();
})

You could consider listening for mouseup and mousedown instead of click, which would help you distinguish between which event the user is performing. Like, if there is a mouse down event, and the user moves the mouse before a mouseup event, then you're in "drag" mode. If there's a mouseup event, and the user is not in "drag" mode, then the user has clicked, and you can fire a focus event.
That's the approach I would take without knowing more about what you're doing.
The truth is that you have a considerably more complex interface requirement than most, meaning you're going to have to give the computer more instructions to determine what to do :)

Related

What's the difference between 'mouseup' and 'click' events?

Using jQuery, I often like to use mousedown and mouseup events in conjunction for pushable buttons.
However, in every case I've used the mouseup event, binding the click event instead seemed to produce identical results.
Is there any substantial difference between the two methods below?
// Method 1
$('.myButton').bind('click', callback);
// Method 2
$('.myButton').bind('mouseup', callback);
Please note I'm seeking a technical explanation on the differences between using both methods. This has no relation to the question that has been flagged as a dupe: Differentiate click vs mousedown/mouseup
With a mouseup event, you can click somewhere else on the screen, hold down the click button, and move the pointer to your mouseup element, and then release the mouse pointer.
A click event requires the mousedown and mouseup event to happen on that element.
The normal expectation is that a click requires both the mousedown and mouseup event, so I'd recommend the click event.
From the possible duplicate, it appears that mouseup and mousedown events can also be caused by mouse buttons other than the left click button. Which is very different from what a generic user would expect.
My understanding is that "click" hides lots of complexities (such as making sure that mousedown/up occur on the same element, cancelling with ESC/right click). Using "click" over "mousedown/up" should be preferred.
One scenario where "click" does not seem to work when app updates content very often in such a way that underlying DOM elements get replaced. In this case "click" will not be triggered and it might result in poor customer experience.
I think Mouse Down and Mouse Up events give you further control over the click event. It divides the click event into two more events so that more details can be coded for each event. Click event restricts the mouse click and force you to code both the events in the same function.
You can understand this restriction if you ever try to make your own dragging behavior.
Dragging needs a mouse-down event to start a drag behavior. You cannot do it with click event. And since you need a separate mouse-down event. The requirement of a separate mouse-up event becomes obvious.
Once the dragging starts ( you have not yet release the mouse button) you need the object to change position as per the cursor position. This too needs to be coded only in mouse-down event.
However you can use click event too if we could change the way how people drag the objects. For example click-1 starts the drag and click-2 stops the drag and puts the object on another position. But there are two problems I see:
It does not look natural. As in the real world we are in habit of
pressing the object and dragging it.
It can be process intensive to move heavy graphics just by clicking and mouse-move.
I would like to add to the other answers that click event works on touch-enabled devices while mouseup / mousedown do not (obviously because there's no "mouse")
Note that there's a 300ms delay on touch devices with the click event.
The biggest difference that affects the way I code is: the click event on an a HTML tag is responsible for changing the URL. In contrast, the mousedown and mouseup events will not acheive this

Capturing first click event on a canvas without focus

I have a Canvas which responds to mousedown events on it. I am then adding an input element to the DOM, and absolutely positioning this so it is over the canvas.
After then user has clicked on the input element, and entered some text, they then click back to the canvas. My problem is that this first click merely sets the focus back to the canvas, but is not registered as a mousedown event on the canvas element.
What can I do to make sure that the first click is registered?
How are you attaching the events? This should "just work", unless there are extenuating circumstances.
Here's an example:
http://jsfiddle.net/bSpe4/
Depending on what your code looks like, giving your canvas a tab index value may also help.
theCanvas.tabIndex = 0; // might fix your particular issue
I just had exactly this problem. I needed to listen for both left and right clicks and was using a mousedown.
In case anyone finds this as I just have. I "solved" it by attaching the event to mouseup rather than mousedown.
That way the focus happens when on mousedown and the event triggers on mouseup which is fine for what I'm doing.

CSS/HTML: mouse down on cancel

I have a link being themed using CSS. I have up, over and down CSS properties applied which all work.
Problem is, when you hold down the mouse over a button, drag away then cancel by letting go, the down state is still being applied until you click again on some white-space.
You can see what I mean by doing the above on buttons 1, 2 and 4 here: http://jsfiddle.net/2vjbz/
How do you 'refresh' by not having to click again?
According to your CSS, I think this behavior is correct, but the problem is that mouse up event is not getting triggered and link element remains in active state. You can fix it using jQuery by invoking mouse up event for link element.
One method is to invoke it when mouse moves in pager div
$('#pager').bind("mousemove", function(event) {
$('#pager a').mouseup();
});
You might need to add conditions to make it perfect
EDIT:
You can experiment with it. This is one more method
http://jsfiddle.net/diode/2vjbz/18/
Here it cancels the drag event. Both of these worked for me.

What is the difference between jQuery's mouseout() and mouseleave()?

What is the difference between jQuery's mouseout() and mouseleave()?
The mouseleave event differs from mouseout in the way it handles event bubbling. If mouseout were used in this example, then when the mouse pointer moved out of the Inner element, the handler would be triggered. This is usually undesirable behavior. The mouseleave event, on the other hand, only triggers its handler when the mouse leaves the element it is bound to, not a descendant. So in this example, the handler is triggered when the mouse leaves the Outer element, but not the Inner element.
Source: http://api.jquery.com/mouseleave/
There can be times when mouseout is a better choice than mouseleave.
For example, let's say you've created a tooltip that you want displayed next to an element on mouseenter. You use setTimeout to prevent the tooltip from popping up instantly. You clear the timeout on mouseleave using clearTimeout so if the mouse leaves the tooltip won't be displayed. This will work 99% of the time.
But now let's say the element you have a tooltip attached to is a button with a click event, and let's also assume this button prompts the user with either a confirm or alert box. The user clicks the button and the alert fires. The user pressed it fast enough that your tooltip didn't have a chance to pop up (so far so good).
The user presses the alert box OK button, and the mouse leaves the element. But since the browser page is now in a locked state, no javascript will fire until the OK button has been pressed, meaning your mouseleave event WILL NOT FIRE. After the user presses OK the tooltip will popup (which is not what you wanted).
Using mouseout in this case would be the appropriate solution because it will fire.
jQuery API doc:
mouseout
This event type can cause many headaches due to event bubbling. For instance, when the mouse pointer moves out of the Inner element in this example, a mouseout event will be sent to that, then trickle up to Outer. This can trigger the bound mouseout handler at inopportune times. See the discussion for .mouseleave() for a useful alternative.
So mouseleave is a custom event, which was designed because of the above reason.
http://api.jquery.com/mouseleave/
Event Mouseout will trigger when mouse leaves the selected element and also when mouse leaves it's child elements also.
Event Mouseleave element will trigger when pointer will leave the selected element only.
Reference: W3School
I encountered a similar problem using plan Javascript instead of jquery, but they're some how related and I'll leave my two cents in case someone else is on the search nowadays.
I was trying to use the mouseout event on a navigation menu. The parent div had a submenu composed of a list of uls elements. When I tried to navigate to the div children elements the mouseout event was fired. This was not my desired output.
From the docs
mouseout is also delivered to an element if the cursor enters a child
element, because the child element obscures the visible area of the
element.
And that was the issue.
The mouseleave event did not have this issue. Just using it made things work for me.
https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseleave_event

Focus and blur events for HTMLDivElement?

I implemented a custom drop down with HTML, CSS and JavaScript. It works well now, but I am not happy with the way I am doing "blurring" right now. When you open the list, and then click somewhere else, it should collapse. What I did was that I added an event listener (mousedown) to the window after expanding the list, and removing the listener after collapsing. The event basically checks whether the DOM event happened on the right element using target and if not, then blur the drop down control.
I know about focus and blur. However, they only seem to work on form elements, which I find quite understandable. They also support other scenarios like when "tabbing" away.
Anyway, I am asking you if there is a better way of doing what I am doing right now. What I do just feels stupid.
Maybe you could have a dummy input and focus that when the control is active. Then watch the blur and close the list. It would not be able to be display:none but maybe opacity:0, or just out-of-view.
What I do is use mouseout to close my custom lists. I create a bounding box around my drop down. That box has the onmouseout event attached to it that closes the drop down when the mouse moves outside of it. This way you can have a little padding outside your list that would give your users a little better functionality then just mouseout on your basic list.
If you want to do it using click events, I would have a global function, like it seems you have setup, and call that function on any click events on the page.

Categories