ProtoypeJS: Only react once on mouseover

Refer to this link (open firebug). 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 开发者_Go百科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.

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.

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

Documentation: Prototype: Event.stop

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');
  });