Prevent Mootools Mouseenter from firing on hidden child elements

Question

I have a content slider that auto rotates that when you hover over it it will stop rotating. My problem is this bit of code here:

$$('.holder').addEvents({
    mouseover: function(){
        clearInterval(rollingon);
    },
    mouseout: begin
});

HTML:

<div id="fliptable">
    <div class="holder">
    <ul class="headliner" style="left: 0;">
        <li class="headitem">
            <div class="squared" style="opacity: 1;">
                            *content*
            </div>
        </li>
    </ul>
    </div>
</div>

Fliptable expands the full width of the browser. So the different list elements have their opacity changed as it goes. Now my problem is mouseover will fire when I'm hovering over the hidden list elements. Is there anyway I can not have it fire on children?

Here is the JS fiddle: http://jsfiddle.net/AjWuL/

your answer is in the title. `mouseenter` + `mouseleave` not `mouseover` + `mouseout` - these are the adjusted events that prevent bubbling to mouseout in error if element is a child of event holder. if you have already tried that, use www.jsfiddle.net to create an example and explain your desired behaviour and you will get help :) — Dimitar Christoff, Mar 05 '11 at 15:42
Oh whoops I forgot to change the code back. I was trying mouseover, but I was using mouseenter at first. Here is the jsfiddle http://jsfiddle.net/AjWuL/ — Neal Carroll, Mar 05 '11 at 21:04
i may have drunk a little tonight but this works as intended. sliding stops on mouseenter and does not resume in error whilst you move the mouse within any child of the .holders. here's an improved version of your class with added Events that fire on various advancements and pauses of cycle. http://jsfiddle.net/dimitar/AjWuL/2/ - prolly not my best code but it's an improvement. notice i add the events to the parent el as this.parent and not to the scrolling nodes (singular vs nnn events) — Dimitar Christoff, Mar 05 '11 at 23:14
Thanks for the improvement! I guess I should have clarified. Off to the right of the visible .headitem the mouseenter will trigger on the invisible .headitem. You may have to expand the result window so that the rotater becomes center to see the problem. — Neal Carroll, Mar 06 '11 at 03:00
that's precizely it - it won't trigger because the event is now in the parent node and not on each pane. check the events log in your console: http://jsfiddle.net/dimitar/AjWuL/4/ — Dimitar Christoff, Mar 06 '11 at 09:31

score 1 · Answer 1 · answered Jun 03 '11 at 13:37

yes, you can just add another class to the list elements you dont want to react to the even and do something like this

window.onmouseover=function(e){
if(e.target.className!="hiddenelements"){
what you want 
}

you have to adapt this to your code, i dont know how to put this in your class on jsfiddle.

Prevent Mootools Mouseenter from firing on hidden child elements

1 Answers1