HierMenus CENTRAL: HierMenus In Progress. HM5 Status Report: Adding Opera (4/5)

The Missing MouseUp

HM utilizes multiple mouse-related events of Web pages to control the display and behavior of the menus themselves. The common mouseover and mouseout events, for example, are used to trigger the display of child menus when parent menu items are rolled over. The click event is utilized to trigger the display of a new menu or the following of a link from a menu item, depending on the configuration of the menus themselves. And the mousedown and mouseup events are used in conjunction with tall scrolling menus, allowing the user to scroll the menus by holding the mouse down on the scrollbars. We didn't run into any problems with Opera's implementation of the mouseover, mouseout, and click events; but the latter two items, mousedown and mouseup, did pose some difficulties.

We've tied two event handlers to the mouseup and mousedown handlers of this Web page. These handlers print a message in the form textarea box below; printing "Mouse is Down" for the mousedown event; and "Mouse is Up" for the mouseup event. Try clicking and releasing your mouse on this page (but not over links, of course, since you will then exit the page) to see how your browser responds to these events. (Most browsers will work with this example, but some older browsers may not).

<input type="reset" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /></form>
<p class="sans">In most browsers, the behavior is what you expect: click the mouse down, 
get a mouse down message; release the mouse, get a mouse up message. In Opera 7 this is also 
the case, but with one notable exception: if you click and then <em>drag</em> the mouse 
over selectable text (or a form input field which supports select events) then no <tt>mouseup</tt>
is provided when the mouse is released. Try it, selecting some text from this paragraph. 
In Opera 7, no <tt>mouseup</tt> message is received; in other browsers supporting the <tt>mousedown</tt>
and <tt>mouseup</tt> events, a <tt>mouseup</tt> is still received following the release of the mouse
(and the selection of the actual text). At this moment, we don't know what's happening with
the <tt>mouseup</tt>; whether it's not firing at all or is being canceled at an extremely low
level of the document (the text nodes themselves, for example) such that it never bubbles 
up to the document level.</p>
<p class="sans">Either way (for HM), we weren't initially concerned with this 
issue, as the only time we look for <tt>mouseup</tt> events is when the user scrolls a scrollable
menu; and at that point the mouse is over a scroll bar (at least initially) so we know
we aren't over selectable text. Or do we?</p>
<p class="sans">It turns out this problem is actually quite tenacious. Consider the example 
of the box below, similar to our box from the previous page:</p>
<p><img src="../../../../art/t.gif" height="90" width="150" alt="Placer image" id="placer1"/></p>
<div>
   <div>
   </div>
aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm
nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz
</div>
<form inert name="msgForm2" action="4.html#" method="post">
   <textarea name="msgBox2" cols="30" rows="5"/ placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" ><input type="reset" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" /></form>
<p class="sans">The code for this box is as follows:</p>
<pre class="code"><code><div id="outerBox" 
     style="position:absolute; top:0px; left:0px;
            border:10px black solid; width:150px; 
            height:90px; background-color:lightgrey; 
            overflow:hidden">
   <div id="innerBox"
        style="position:absolute; top:0px; left:0px; 
               width:130px; height:70px; 
               border:10px red solid; 
               background-color:white">
   </div>
aaa bbb ccc ddd eee fff ggg hhh iii jjj kkk lll mmm
nnn ooo ppp qqq rrr sss ttt uuu vvv www xxx yyy zzz
</div></code></pre>
<p class="sans">This time we attached the mousehandlers directly to the inner <tt>div</tt>
of the example (within the red border). Click your mouse within the white area of 
the box. Again, if the mouse does not move, then the <tt>mousedown</tt> and <tt>mouseup</tt>
are reported as expected. If you do move the mouse, however, typically no <tt>mouseup</tt> is 
reported. Why? Presumably because the browser "sees" the text <em>beneath</em> the red 
bordered box (i.e., the "aaa bbb ccc..." text) and begins selection of that text, canceling 
the <tt>mouseup</tt> in the same manner as above--even though that text is not visible to the user. 
To confirm this, set up your own test with the box above, but remove the text in the outer div. 
You will find that the <tt>mouseup</tt> and <tt>mousedown</tt> then behave predictably; you can 
move the mouse within the white box while the mouse button is down and still receive the 
<tt>mouseup</tt> message when you release it.</p>
<p class="sans">Another way to trigger the problem is to move an element with text 
<em>beneath</em> the element the mouse handlers are assigned to. In this scenario, the
user does not even have to move the mouse after pressing the mouse button; the text that
moves beneath the mouse itself triggers the select action, canceling the <tt>mouseup</tt>
event. As in the above example, it doesn't matter if the user can see the actual text
that is moving, so long as it's in an element of the page that is not itself 
explicitly hidden (<em>really</em> "hidden," as opposed to simply <em>covered</em> by 
another element in higher z-order).</p>
<p class="sans">In HM, the result of all of this is the triggering of two potential problems, 
both of which can occur when scrollable menus are displayed:</p>
<ol class="sans"><li>Once a menu begins scrolling, it may not stop until it reaches its ultimate top or
       bottom item. This is because we're looking for the document's <tt>mouseup</tt> to trigger the stop
       action for the scroller, which may never occur; either because the text of the menu
       items themselves trigger the select action as they scroll beneath the mouse, or 
       because the user inadvertently moves the mouse while on the scroll bar and the scroll
       bar happens to appear over in-page text.</li>
   <li>As menu items pass beneath the scroll bar, the text of the menu items themselves may
       appear as selected items; indeed, this selection may even carry over to elements
       of the actual HTML page itself, depending on the positioning of the scrolling menu 
       within the page.</li>
</ol><p class="sans">Regrettably, we haven't discovered a graceful workaround for this 
specific problem; and we suspect we'll have to disable scrolling menu support in Opera
entirely when we release version 5. On the next page, however, we discuss <a href="5.html">some 
of the things we tried</a> in an effort to work around the issue.</p>
<p align="right" class="regular"><a href="index-2.html"><img src="../../../art/b_left_over.gif" alt="To page 1" width="18" height="18" border="0"/></a><a href="2.html"><img src="../../../art/b_left_over.gif" alt="To page 2" width="18" height="18" border="0"/></a><a href="3.html"><img src="../../../art/b_left_over.gif" alt="To page 3" width="18" height="18" border="0"/></a><img src="../../../art/b_center.gif" alt="current page" width="18" height="18" border="0"/><a href="5.html"><img src="../../../art/b_right_over.gif" alt="To page 5" width="18" height="18" border="0"/></a><br/><a href="3.html">[previous]</a> <a href="5.html">[next]</a></p>
<div>
<p align="CENTER">
Created: March 12, 2003<br/>
Revised: March 12, 2003</p>
<p align="CENTER"><small>URL: https://www.webreference.com/dhtml/hiermenus/inprogress/1/4.html</small></p>
</div>
<script language="JavaScript1.2" src="../../scripts/HM_Loader.js" type="text/javascript"/>                
                </div>
            <div id="right"><div class="image square quad" style='margin-bottom:20px;'>
    
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>
<div id="ssn_widget_container">
    <div id="ssn_widget_header">
        <h5><img border="0" align="absbottom" alt="Justtechjobs.com" src="https://images.justtechjobs.com/images/webreference.gif"/>Find a programming school near you</h5>
    </div>
    <div id="ssn_widget_content">
<form inert id="SSN" name="populate" action="https://www.webreference.com/school-search-results.html" method="get">
	 
	 <label>Zip Code:</label>
	  <input name="pc" type="text" maxlength="5" value="" style="display:block;float:left;" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />
	 <br/><br/> 
	 <label>Subject:</label>
	  <select name="sub">
		<option value="all">- Select All Subjects -</option>
				<optgroup label="Computers and Technology">
		<option value="compapplications">Computer Applications</option>
		<option value="comeng">Computer Engineering</option>
		<option value="comscience">Computer Science</option>
		<option value="cnp" selected="selected">Computer Prog. - Software Dev.</option>
		<option value="gameprogramming">Computer Game Programming</option>
		<option value="webdesign">Web Design</option>
		<option value="webdevelopment">Web Development</option>
		<option value="internetsystems">Internet Systems</option>
        <option value="internetcertification">Internet Certification</option>
        <option value="databasedesign">Database Design and Development</option>
        <option value="infosystemsmgmt">Information Systems Management</option>
        <option value="itprojectmgmt">Information Technology Project Management</option>
		<option value="networkdesign">Network Design - Development</option>
        <option value="systemsanalyst">Systems Analyst</option>
	  </select>
	  <br/><br/>  
	  <label>Degree:</label>
	  <select name="qual">
	   <option value="all" selected="selected">- Select All Degrees -</option>
		<option value="associate">Associate's</option>
		<option value="bachelor">Bachelor's</option>
		<option value="master">Master's</option>
		<option value="doctoral">Doctoral</option>
		<option value="certificate">Certificates</option>
		<option value="diploma">Diplomas</option>
		<option value="coursework">Coursework</option>
		<option value="mba">MBA</option>
	  </select>
	<br style="clear:both;"/><br/>  
	 <input name="ct" type="radio" value="online"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Online
	  <input name="ct" type="radio" value="campus"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Campus
	  <input name="ct" type="radio" value="either" checked="checked" placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />Both
      
	  <br/><br/> 
	  <input type="submit" value="Submit"  placeholder="disabled" disabled="disabled" title="form boxes are disabled in cached version of the site" value="Disabled" style="opacity:0.3;" />	
</form></div>
</div><div class="image square quad" style='margin-bottom:20px;'>
     
<script language="JavaScript">
	var t=displayDFPTag("imu");
	document.write(t);

</script>
</div>

<div class="articlecategorysummary">
    <iframe scrolling="no" frameborder="0" align="middle" src="https://webreference.com/sl/assetlisting/index0f3e.html?wsn=www.webreference.com&wpu=/dhtml/hiermenus/inprogress/1/4.html&lurl=https://o1.qnsr.com/cgi/r?WT.qs_dlk=WkaTeArIZ78AAHFbYwIAAAAR%20domain=None;;n=203;c=1395323;s=9530;x=7936;f=201308291521150;u=j;z=TIMESTAMP;k=https://assetform.webreference.com/controller&wpos=AssetListing&lyt=l9&mcss=https://www.webreference.com/imageserver/b2btechleadform/webreference/styles/style_email.css&css=https://www.webreference.com/hqb2b/css/qmp/qmp_default.css&title=Top%20White%20Papers%20and%20Webcasts" name="inneriframe" id="inneriframe" height="820px" width="340px;"></iframe>
</div>

</script>
</div>

</div>
        <div class="clear"></div>
        <div id="footer">
        <div id="footer_content">
    <div id="quad_bottom"class="quad" align='center' style='margin-left:auto;margin-right:auto;width:720px;'>
        
<script language="JavaScript">
	var t=displayDFPTag("lb");
	document.write(t);

</script>
    </div>
    <div class="footer_listing">
         
    </div>
    <div class="footer_listing">
        <span class="list-header">WebReference</span>
        <ul>
            <li class="first"><a href="../../../../js/tips/index.html">Tip Archive</a></li>
            <li><a href="../../../../about.html">About</a></li>
            <li><a href="../../../../sitemap.html">Sitemap</a></li>
            <li><a href="../../../../contact.html">Contact</a></li>
            <li><a href="../../../../accountManagement87fb.html%3FformType=registrationForm.html">Subscribe</a></li>
        </ul>

</div>
    <div class="footer_listing">
        <span class="list-header">Topics</span>
        <ul>
            <li class="first"><a href="https://webreference.com/authoring.html">Web Authoring</a></li>
            <li><a href="../../../../internet/index.html">The Internet and the Web</a></li>
            <li><a href="../../../../multimedia/index.html">Multimedia</a></li>
            <li><a href="https://webreference.com/programming.html">Web Programming</a></li>
            <li><a href="../../../../promotion/index.html">Website Promotion and Marketing</a></li>
            <li><a href="../../../../experts/index.html">Contributors</a></li>
        </ul>
    </div>
    <div class="footer_listing">
        <span class="list-header"><a href="https://www.developer.com/"><img src="../../../../img/dev.com_logo.png" alt="Developer.com"></a></span>
        <ul>
            <li class="first"><a href="../../../../terms.html">Terms Of Service</a></li>
            <li><a href="../../../../licensing.html">Licensing and Permissions</a></li>
            <li><a href="../../../../privacy.html">Privacy Policy</a></li>
            <li><a href="../../../../mediakit/index.html">Advertising</a></li>
            <li><a href="https://e-newsletters.developer.com/">Newsletters</a></li>
            
        </ul>
    </div>    <div class="footer_listing">
         
    </div>
    <div class="clear"></div>
    <div id="copyright">
        Copyright © 2017 QuinStreet Inc. All Rights Reserved.
    </div>
</div>

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-48218803-1', 'auto');
    ga('send', 'pageview');

</script>

        </div>

<div id="ajax_alpha"></div>
		<div id="ajax_beta"></div>

</body>

</html>