This problem is a little complicated and wordy.
I have a parent window, which pops out a child window. They have some overlapping area.
In parent window, there is a div which handles mouseover and mouseout event.
When the child window pops out, it covers part of the parent div.
In the following, mouse moves to div (mouseover works), click pops out child window.
Now move mouse to child window. At this moment, I expect mouseout to div, but not.
I guess the system still thinks the mouse is within div even covered by the child window.
Is there any way to get through this? But the relative position of those elements should not change. Thank you for your advice.
If all else fails move your code from the mouseout event of the div to the mouseover event of the pop-up. First, though, I'd make sure that the mouseout event ever fires, e.g. when you move outside the div's bounds.
Related
When having a button (or any other element, positioned absolute or fixed) on top of an element with a scrolling area which is actively scrolling (i.e. for example it's decelerating) it seems that the button doesn't receive the click event when clicked.
It seems that when clicking (or touching) the scrollable element area, the scrolling is interrupted, but the button on top of it doesn't receive any event.
I've debugged events for the floating element in Chrome and the only thing received is a mousewheel event.
This is particularly annoying if the button is a navigation button, as you have to click twice to exit the page if the content is decelerating (as opposed to once when the content is still).
I browsed many times for a solution but never found a clue about this behaviour and how to avoid it, so any thoughts will be appreciated.
Sample code here: https://codepen.io/djibarian/pen/bGLoYxY
If you scroll the red box and while still scrolling due to inertia try to click the button, you only manage to stop the scrolling in the box, but the button doesn't receive the click event.
I haven't seen your code, but it's worth checking following.
Check if any element overlaps the positioned fixed element.
Make sure the stacking context of the element is correct.
Try adding a higher z-index and see if it's working. If it works then it's worth changing the dom element order for precedence.
Using IE8, i have a mouseover event on a div that contains several images.
When moving over the div the event triggers fine, but the problem is that when the user enters and exists an image, the div mouseover triggers again.
Apperenlty IE8 sees hovering images as leaving the div.
Does anyone know a nice method so the event triggers only once when entering the div and doesn't fire anymore while the user is wihtin the div's borders?
Use mouseenter and mouseleave instead of mouseover and mouseout
Ok so my basic problem is as follows. I have an image that causes everything else on the page disable using a blank div with a z-index. This is during a mouseover event of the image. Next the code goes into setting the z-index on the div that I want to be able to click or mouseover. Also I wrapping these images in a div that is used for a mouseout event to hide the images I do not want to show.
However when mousing over the images or text inside the div it causes the mouseout event to trigger. I have looked into event bubbling but it does not seem to be what is happening. Is there a way to turn off the mouseout event to object inside of the div with the mouseover event?
Long story short I need to make a mouseout event not trigger on nested items.
Thanks in advance.
Instead of using mouseout you may go this way:
when blocking the UI by overlaying the page with the blank div observe the mouseover-event of the wrapper-div
When mouseover fires on the wrapper-div start observing the mouseover-event of the blank div
When the mouseover fires on the blank div reset the page(remove the blank div)
The approach should be clear, if the mouse is over the blank div it must be outside the wrapper-div.
I have an info overlay that works great in Chrome and FF. It is a div containing a table (for border image layout) and then a central content div. I trigger mousedown on the appropriate border table cells.
Once this happens, a different div is brought to the front with z-index, and that passes along the mousemove and mouseup events to handle dragging the info bubble around. Once the mouseup is fired, the info bubble puts the "event" div back to where it was.
I also follow the same process for dragging the lower right corner of the bubble to resize it. Again, works in Chrome and FF, but fails in IE.
IE seems to be restricting the event triggers to the info div. If the mouse manages to move outside the div (from dragging faster then the events fire/update), the info overlay no longer receives mousemove events. However, if I move the mouse back over the overlay (without releasing the button) it continues to receive mouse events.
Edit: In creating some example code (the current functionality is split across several JS modules), it worked in IE. As soon as I find the difference between my example code and the actual code, I will update again.
Edit/Answer: (SO wont let a new user answer their own question in this time span...)
Still not sure what the actual problem was. (If you ask me, a div with a z-index of 100 should be receiving mouse events just fine?)
My solution was to fix my mouse event handling such that I could attach my mousemove and mouseup to the parent div (as should have been done in the first place) for all dragging/resizing behaviors I wanted to set up.
The problem was due to a newbie approach to the events and having stopPropagation() in too many locations preventing me from taking such an approach. (I wanted text, etc in my info box to be selectable).
I adjusted the code so that my text containers only had to stop propagation on mousedown instead of all the mouse events.
I have a div in which there is a link. When a user takes the mouse pointer over the link, I call the basic_nav_mouseover() function which changes the background-image of the parent div. I have also added the function basic_nav_mouseout to the ommouseout attribute of the parent which should set the background-image of the parent div to none when the mouse pointer leaves the div. However, strangely, the function basic_nav_mouseout() is getting called as soon as the mouse pointer in leaving the link in the parent div. Here is a test page : http://spats.in/test/. Look at the links 'about' ,'people','connect' on the top right corner.
Where am I going wrong?
There's a really good explanation of the limitations of the mouseover and mouseout events in the jQuery docs (about half way down that page).
Mouseover and mouseout events trigger when you move the mouse over the bound element, as expected, but they also fire a separate event when you mouse over any inner elements within the parent element - this is obviously undesirable in most circumstances.
Basically, to fix your problem, use the mouseenter and mouseleave events instead.
From a user experience point of view, I'd encourage you to bind both events to the link, so that the special background colour actually indicates that the link is active - I think I'd find the effect you are trying to achieve quite misleading, because the highlighted background would make me think that I can still click the link, even though I cannot..
If you want to keep the visual effect you've current got (with a tall coloured area behind each link), make the link take up the whole box - i.e. 100% of the height and width of the div.
If onmouseover is set on the link, onmouseout should be set on the same element.
onmouseout gets triggered every time a child node is hovered over, you need to check the calling target.
http://www.quirksmode.org/js/events_mouse.html is a good resource.
I'm no javascript expert, but shouldn't you wait with binding the function to the event until the page is fully loaded? So:
window.onload = function(){
$('.item1').bind('mouseleave',basic_nav_mouseout);
};
Also (correct me if I'm wrong) I don't think you have to give the object as an argument in 'basic_nav_mouseout('.item1','red')', you can just use the 'this' keyword. So:
function basic_nav_mouseout(){
this.css('background-image',"none");
}
I don't know anything about the JQuery library though, my only (little) experience is with the Prototype library.