I have some styleBox elements that aren't triggering when I tab through the items. Does the change() also get triggered on focus?
From the jQuery documentation for .change():
For select boxes, checkboxes, and radio buttons, the event is fired
immediately when the user makes a selection with the mouse, but for
the other element types the event is deferred until the element loses
focus.
See here for details.
May be better to use .focus() if you can.
Related
On this page: https://turbo-theme-seoul.myshopify.com/ the drop-down menus appear when mouseover the corresponding menu item. In order to inspect the HTML elements of the drop-down menus, I need to force them to display. Normally this can be done by forcing the state of the parent menu item to be :hover in developer tools, but in this case it doesn't work. I guess the drop-down is triggered by javascript instead of CSS. How can I make this drop-down appear programmatically without having to move my mouse over it? I tried
$($0).hover()
and
$0.dispatchEvent('mouseover')
on the parent menu item, they are both not working. It seems to me that 'mouseover' event can't be triggered programmatically. How do I do this then? PS: I know I can just find the drop-down menu in HTML and remove "display:none" from them, I just want to know if there is any way to trigger the mouseover event and let the dropdown menu appear programmatically for learning purpose.
As the jquery official document says:
The .hover() method, when passed a single function, will execute that handler for both mouseenter and mouseleave events. This allows the user to use jQuery's various toggle methods within the handler or to respond differently within the handler depending on the event.type.
so the hover event is consist of mouseenter and mouseleave event, so you can't trigger the hover event programmatically since you can't trigger mouseenter and mouseleave at the same time.. So you should use .mouseenter() to show your drop-down, and use .mouseleave() to hide it.
Recently the following post has helped me simulate a keypress on click:
Definitive way to trigger keypress events with jQuery
I found that the selector $("input") only seems to work if the page has an input that is visible and not disabled.
Is there a way to trigger a keypress on a hidden element or another element that will give the same result (properly trigger the key press event)?
Disabled elements don't fire mouse events. Most browsers will propagate an event originating from the disabled element up the DOM tree, so event handlers could be placed on container elements. However, Firefox doesn't exhibit this behavior, it just does nothing at all when you click on a disabled element.
As showed here, I suggest you to create a trigger element that when clicked show/enable the input temporary, launch a focus/click event as the post you suggested and then hide it again.
I want to know the right event when the user remove focus on a text box. Whether if the user presses tab or clicked to another field. I've seen some solutions like onchange or blur. But it doesn't satisfy all scenarios when the user remove focus. I want to use pure javascript or jquery. Thanks!
jquery focusout() is the best suited in this case
go thought this link
jQuery .focusOut() documentation
I find .focusOut() useful when I'm more specifically concerned with losing focus from a defined input or input group, since it supports event bubbling.
see the demo in http://api.jquery.com/focusout/ it works when user uses tab to focusout or clicks anothoer field
FYI: The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).
you can use blur() event.
The blur event is sent to an element when it loses focus. Originally, this event was only applicable to form elements, such as . In recent browsers, the domain of the event has been extended to include all element types. An element can lose focus via keyboard commands, such as the Tab key, or by mouse clicks elsewhere on the page.
As some of you may know already, Internet Explorer's onchange event is fundamentally broken prior to version 9. Instead of triggering when a change occurs, it triggers when the input field loses the focus and has changes.
This lead to various workarounds for checkboxes and radio buttons ("use onclick instead") and text fields ("use keyup instead").
However, I'm having that problem for a file input, and I can't figure out what I do to be notified that a new file has been selected, right after it did, and not when the user clicks elsewhere. I can't attach myself to a mouse event because it's not related to the mouse; and I can't attach myself to a keyboard event because it's not related to the keyboard either.
I'd be willing to use IE-specific stuff if it can solve the problem.
Additional infos:
I use jQuery 1.6 and the live method to attach the event.
$(".upload").live("change", function() { /* stuff here */ });
Use the onFocus event, combined with a check to ensure that there is a value. This works because after the user selects a file and the OS file selection dialog box is removed, focus is returned to the input element.
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