Question

I have several onmouseover events (combination of javascript functions and jquery accordions) but they seem to be overly sensitive to the exact location of the mouse to the point that it’s making it either very difficult to trigger and/or overly easy to mouseout and close the function (making it very difficult to select something and/or to inadvertently trigger the wrong function). I’m working with a very tight layout so I can’t increase the space between elements.

What’s a simple way to either expand the area that will trigger a function or decrease the sensitivity surrounding a mouseover element without affecting the layout? I’ve tried playing with the margins and padding and it hasn’t seemed to help.

I’ve included below one example of this in a javascript function that I’m using in the menu.

# HTML #
<a style="top:13px; left:43px; position:absolute; z-index:31" href="createaccount.html">Create Account </a>

<ul class="menu" style="top:2px; left:99px; position:absolute;"> 
<li><a style=" text-align: left;" href="createaccount.html" onmouseover="mopen('m1')" onmouseout="mclosetime()">&#x25B6;</a>

<div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
<a href="mybody.html" style="top:-9px; left: 16px">Quick Start</a>  
</div></li>
</ul>

# Javascript #
var timeout = 150;
var closetimer = 0;
var ddmenuitem = 0;

function mopen(id) {
mcancelclosetime();
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';
}
function mclose() {
if (ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}
function mclosetime() {
closetimer = window.setTimeout(mclose, timeout);
}
function mcancelclosetime() {
if (closetimer) {
    window.clearTimeout(closetimer);
    closetimer = null;
} 
}
document.onclick = mclose;

# CSS #
.menu div { 
position: absolute; visibility: hidden; margin: 0px 0px 0px 7px; padding: 0; width: 120px; height:62px; background: black;}

    .menu div a {position: relative; display: block; padding: 0px 0px 0px 0px; margin: -3px 0px 0px -9px; width: 105px; text-align: left; text-decoration: none; background: black; color: white; }

Answer 1

Its not clear to me what the problem is, but you could try handling the mousedown at the document level and find the appropriate control yourself. Therefore you can decrease the sensitivty yourself.

ie. something like the following pseudo-code

document.onmousedown = mouseDown;

function mouseDown(e)
{
    for (int i=0; i < controls.Count; i++)
    {
        position = getAbsolutePosition(control[i);
        if ((e.x > control.x - 5) && (e.x < control.right + 5) &&
            (e.y > control.y - 5) && (e.y < control.bottom + 5))
        ... do something
}

The above code allows for a 5 pixel buffer around the control to still be considered part of the control. The “getAbsolutePosition” is to turn the controls co-ordinates into screen co-ordinates.