Unusable links with onmouseover() got an interesting question, when I tried to answer it. After some logging experiments, I've set up http://jsfiddle.net/RnGxP/1/. The last two examples work as expected, the hide when clicking on "Close" or leaving the "Close" div.
The first two examples set a new innerHTML to the div whenever the mouse moves in it (I'd never do that myself, but...).
So, when moving the mouse into one of them they get expanded. And moving the mouse further on a link or the "close" div, more move events get fired.
But then, clicking on the close button in the second example - without moving the mouse -, instead of a click event two mousemove events are fired! What exactly happens here? I can understand that the click event gets lost in some way (loosing its target?) when resetting innerHTML, but why is the mousemove event fired before?
You are rewriting the innerHTML of the div element in the mouseover event. This means that each time you move the mouse it is in fact moving over a new node, which triggers a new mouseover event on that node, which bubbles up to the div element, which rewrites the innerHTML etc. etc.
So by the time the mouseout event fires on the inner div, the mouseover event has already rewritten the innerHTML on the outer div, and so the inner div has no parent...
What you really want to use is the mouseenter event (and presumably the mouseleave event on the inner div), which used to be proprietary to Internet Explorer but according to MDN Firefox 10 and Opera 11.10 support it too.
Related
I have a scrollable element (overflow-y: auto;) in my HTML.
However, when you put mouse over it and start to use mousewheel it's not scrolling unless you click inside of it.
The only workaround I found was to add tabindex="-1" attribute to make the element focusable and then call $element.focus() when mousewheel events occur. This works to a some degree. However, when element is focused already, the focus() will not do anything and the element become unscrollable until you click outside of it and then click inside of it again. Also, I don't like this workaround because it will draw a focus border around the element.
What actually controls what element on the page receives the scrolling? The weird thing is that I can see that my element actually receives the mousewheel events, but it's not scrolling for some reason.
SO, how do I make sure that element is scrollable by mousewheel when mouse pointer is over it?
I'm testig it in Google Chrome.
The following fiddle creates a 10px red square div when clicking on screen. This div has a mouseleave event attached to it to remove itself.
https://jsfiddle.net/fh4u44su/
If you click and move the cursor fast enough outside the div, the mouseleave event is not called (in Chrome and Safari, is called properly in Firefox).
It seems that if you create the element below the cursor and then move the cursor outside the element fast enough to not generate any mousemove events for the element, the mouseleave event is not triggered (so the element is not removed in the example).
Does anyone know if this is a documented bug, an intended behaviour for any reason, or if there is any workaround for it? By the way, it happens the same using mouseout event.
I noticed mouseenter event triggered when mouse is untouched but the page below the cursor is scrolled.
Check out this fiddle: http://jsfiddle.net/F3EwW/
Steps to reproduce:
Click on a li
Use up/down arrow keys to scroll the items
You would notice the mouseenter event getting triggered when the li below is scrolled to the view.
Note: To notice this behavior, make sure the mouse cursor is above li and leave it untouched.
Initially, I accepted this as a default behavior and went on with a work around to handle this in my code.. but then I got curious and wanted to verify this behavior in any documentation which I couldn't find it anywhere.
Does anyone know if this behavior is documented anywhere in spec or any authentic webpage?
I looked up w3spec event scroll and mouse event order, but couldn't locate anything about this.
Also the spec description for mouseenter is as follows,
A user agent must dispatch this event when a pointing device is moved onto the boundaries of an element or one of its descendent elements. This event type is similar to mouseover, but differs in that it does not bubble, and must not be dispatched when the pointer device moves from an element onto the boundaries of one of its descendent elements.
In Chrome, you would notice mouseover to be triggered as well. I have posted a question and a bug report already on this.
You realize that you have $('li').mouseenter(function () { ?
this caused the mouseenter event to be binded to each and every one of this li elements so when you are using the up and down key to scroll and your mouse is still inside the ul it keeps entering a new li. This was not an unintended feature the mouse in entering the new element.
The behaviour you are looking for is more something like this:
$("element").bind("mousemove mouseenter", function(event) {
//...
});
Also you need to realize the DOM understands the movement of the mouse relative to the document not where your mouse is on your screen as your OS does.
I have several pages that are all very similar. They have some javascript rollover links (images are preloaded, then there is a onMouseOver event that calls an image swap function and finally, there is a onMouseOut event that restores the original image).
When the user clicks on a rollover link that points to another page that has a rollover link on the exact same position, the image on the new page would be expected to load on the "over" state. This is not the case in Chrome and Safari (IE and Firefox work as expected).
So... On page load, is there a way to check if the mouse is already hovering the image to swap it right away? Something like "OnMouseAlreadyOver"?
Thank you.
If you using jQuery, it works without any problems!
http://jsfiddle.net/beuae
(not only for buttons, for divs also)
Actually, jQuery is a very good framework which assures everything goes as you expect, and cross-browser. This example confirms it.
The W3C standard says
onmouseover = script [CT]
The onmouseover event occurs when the pointing device is moved onto an element. This attribute may be used with most elements.
onmousemove = script [CT]
The onmousemove event occurs when the pointing device is moved while it is over an element. This attribute may be used with most elements.
mouseover is fired on moving over the boundary of the object. mousemove happens when the mouse is already over the element.
You may need to use onmousemove (or even both).
You may need to actually do the calculation based on the element position and the mouse cursor position.
//Get Mouse Position
document.onmousemove=getMouseCoordinates;
function getMouseCoordinates(event){
ev = event || window.event;
mouseX = ev.pageX;
mouseY = ev.pageY;
}
You can't without passing a variable to the other page or using cookies to track which was hovered (and that will fail over if people do change their mouse position)
In theory you could check the mouse position and the button position however there is no way to get the mouse position unless an event is triggered, so the mouse has to move and if it move the CSS :hover should get triggered.
It's a minor issue tho, I doubt most people are going to click a link, wait for the next page and then expect that link to be hovered and ready to click again (why wouldn't anyone one to keep clicking the same button unless it does different things)
From a UX point of view I wonder if webkit doesn't have the best approach here, why port the action of one page to another.
You can use document.getElementFromPoint(mouseX, mouseY) to get the element, but the only way to get the cursor's position is via an event. The problem is, the only events are clicks and mouse movements, which require user input from the beginning, which is what you're trying to avoid.
In short, no, it's not possible to do with JavaScript. You're left with using CSS.
I'm trying to build a little calendar app sort of like Google Calendar. I'm trying to create events with a click and drag functionality so that the events align to a grid. I'm trying to
tie the dragging to TD elements below the event DIV element, which works when moving downwards (lengthening the event), but it doesn't work moving upwards (shrinking the event).
What occurs is that the mouseenter event is fired for the event DIV element, but it is never fired for the underlying TD. If you try to resize the DIV by moving upwards on the side, it works because the TDs actually receive the mouseenter event.
Google Calendar and jQuery Week Calendar use the mousemove event, but the mousemove event is fired for every pixel, which seems a waste. Is there a way to write this without using the mousemove event?
Is it possible to put the DIV element behind the table and the TDs? If the table is somewhat transparent, the user would still be able to see the DIV, but would actually be firing events on the TDs. I tried to do this with z-index, but it didn't seem to actually work.
jsFiddle example code: http://jsfiddle.net/rockymeza/8SHpA/
It sounds like you're having a similar kind of issue that I had:
you want to fire event behind an element? The answer is CSS. Set pointer-events:none; to the parent.
I had made a test where I tried to (unsuccessfully) implement the same behavior on touch devices. You can check that at: http://www.hakoniemi.net/misc/pointer-events.html if it'd help you with your issue.