MouseDown behavior

To understand mousedown behavior in a simplistic dropdown menu, I created a small model. (See attached .web file.)

• All buttons and dropdowns have 1) mouseOff, 2) mouseOver, and 3) mouseDown states
• All links = javascript:;

I note the following behaviors:

• The button 2 (no dropdown) can be pressed any number of times and the mouseDown state functions properly.
• The button 1 (with dropdown) can be pressed exactly once and the mouseDown state functions properly. If I press the button multiple times, with the cursor in exactly the same position (no hand/mouse movement), only the first click behaves as expected. If I press button 2 multiple times, but ensure that the cursor moves before each click (even if only slightly), then the mouseDown function works properly.

Why does button 2 (on popup layer 'btn1') behave differently?
What are your observations?

I see the behavior you are highlighting and I don't understand the difference either. That said, in the real world (the real 'virtual' world of the internet :D) your users are unlikely to experience the anomoly. No? It seems unlikely that folks will keep a mouse stationary and click, click, click...

It is indeed a curious behaviour and probably worth bringing in case it relates to some unintentional bug.

Regards, Ross

I've noticed this behavior before. You have to move the cursor on the button to make it work. But why would anyone be clicking on button 1 wouldn't they be clicking on 1A 1B or 1C?

I understand that it may not matter in the least to a user, but thought it would be 1) personally interesting to know why, and 2) to inform the developers that there is, at least, an apparent behavioral inconsistency.

covoxer? :)

That's because after click the popup layer is closed. As you still over the button1 it's immediately popped up again but you don't trigger mouseover state to the button1 object placed on the popup layer.
Try attached design instead.

Thanks, John, for explaining how it works and for offering an alternative solution. :cool:

John - can you explain what change you made? Being still relatively new to this stuff, your and Cursor's files seem identical but your file behaves different but I can't determine why.

Regards, Ross

He removed the [mouseOver-styled] cover image (for 'button 1') that I had on the popup layer 'btn1'. Note that as you traverse down the popup menu, the 'button 1' image reverts to the mouseOff state (blue, not orange). While that doesn't solve my problem (I want/need the popup layer to indicate button 1 is currently active), it does explain the behavior reference in my initial post.

Given that explanation, I'll work toward a satisfactory solution (given the framework of my personal requirements). If/when I come up with an alternative, I'll post it. Certainly, if anyone else beats me to it ... I'm always happy to learn. Mercí.

Quote:

---

Originally Posted by cursor

...that doesn't solve my problem (I want/need the popup layer to indicate button 1 is currently active),...

---

You have a conflict here. let me explain. The way you had implemented it, it behaves as if the button1 drops down a menu. Note, that this way it is not supposed to have a on click link. Think about it - when you mouse over button1 it turns to mouseover state and drops down the menu. But as you move pointer away from buttin1 on to the menu, the button1 still stays highlited. Thus, this state does not indicate a mouse over behavior but rather selected behavior. So, moving back to the button1 from the menu you wouldn't expect it to accept a click since it doesn't change it's look as it is supposed to in case it has a link and mouseover behavior.

Generally it is not advised to mix both rollover an popups to do the same thing. In your case you actually has a two separate mouseover objects - one on the mouseover layer and another one on the popoup layer. They are expected to do exactly the same action. So to avoid unexpected behavior (the script has to resolve the conflict some how, for example which on to popup first and which link to use if they are different), simply do not create such ambiguous situations.

In XXP4 it was prohibited to use both rollover and popup on the same object. But using practice showed that this is highly desirable. So we had added such possibility.

The Xara.com site exemplifies the type of behavior that I would like to employ.

• As you mouseover the Products button the expected visual effect is provided on the button face, and the dropdown menu is stimulated.
• Moving the cursor off the Products button and onto the dropdown menu items allows for an appropriate mouseover effect while on that submenu.
• At the same time, note that the Products button reflects an active state (that is, it continues to display its mouseover image).
• Clicking on a submenu item will direct the browser to that item's specific web page.
• Moving the cursor back up to the Products button, then clicking, directs the browser to an overview web page that highlights all the products together.

Additionally, I want to add mouseDown effects (as illustrated in my initial attachment, posted above). Can Xara Web Designer accomplish this?

Thanks. :)

Well, haven't you accomplished this? Second click on the same position will not occur in real life use because the first click will probably take you somewhere, right? ;)

Yes ... you're right! :p
I guess I was getting the distinct impression that I was mishandling xWD principles or something (based on the follow up comments/posts). If my initial attachment offers the best solution for my design intent, then it's full throttle ahead!

Thanks for the input, clarifications, and solid explanations. :)