1

我有几个 onmouseover 事件（javascript 函数和 jquery 手风琴的组合），但它们似乎对鼠标的确切位置过于敏感，以至于它很难触发和/或鼠标移出和关闭太容易功能（使得选择某些东西和/或无意中触发错误的功能变得非常困难）。我正在使用非常紧凑的布局，所以我无法增加元素之间的空间。

在不影响布局的情况下扩展将触发功能的区域或降低鼠标悬停元素周围的灵敏度的简单方法是什么？我尝试过使用边距和填充，但似乎没有帮助。

我在菜单中使用的 javascript 函数中包含了以下一个示例。

# 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; }
4

2 回答 2

1

我不清楚问题是什么，但您可以尝试在文档级别处理 mousedown 并自己找到适当的控件。因此，您可以自己降低敏感度。

IE。类似于以下伪代码

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
}

上面的代码允许控件周围的 5 像素缓冲区仍被视为控件的一部分。“getAbsolutePosition”是将控件坐标转换为屏幕坐标。

于 2012-06-26T05:18:12.680 回答
1

发生 mouseover 事件后，在项目顶部显示一个透明 div，每边大 5px。如果您使用巧妙的 CSS 样式，它甚至可能不需要 javascript。

搜索“纯 CSS 分层菜单”。

于 2012-07-26T04:50:52.853 回答