ProtoypeJS: Only react once on mouseover

Question

Refer to the link below. I have a "dropdown" html element which has an event observer looking for mouseover. It's working, but it continuously fires mouseover events while you are mousing over the other elements inside it. I am guessing this is because of bubbling.

Is there a way to only make it fire the event on the initial mouseover? I want it to do an Effect and this is breaking the effect. I am sure it's just something basic I am not doing.

Thanks for the help.

http://tinyurl.com/y88rcrz (open firebug)

Answer 1

I believe that you may want to use Event.stop(event)

Documentation: Prototype: Event.stop

Answer 2

You should only be observing the mouseover event on elements with the dropdown_label class.

Given your HTML:

<div class="dropdown" id="">
    <div class="dropdown_label">About <strong>Us</strong></div>
    <div class="dropdown_content">
        <ul>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Facts and Figures</a></li>
            <li><a href="#">Offices</a></li>
        </ul>
    </div>
</div>

Both the dropdown label and the dropdown content are contained within the dropdown. It sounds like you only want your effect to execute when the user mouses over the dropdown label.

---

Edit

Some untested JavaScript that may or may not work

$$('DIV.dropdown').each(function(dd) {

  var dd_list = dd.down('.dropdown_content');

  dd.select('DIV.dropdown_label').each(function(ddl) {
    ddl.observe('mouseover', function(event){
      console.log('mouseover');
      dd.addClassName('dd_open');
    });
  });

  dd.observe('mouseout', function(event){
    console.log('mouseout');
    dd.removeClassName('dd_open');
  }); 

Answer 3

Figured it out. With the latest version of prototype you can create onmouseenter and onmouseleave events, which only fire once. Thanks to the Protoype Google group.