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

問題が何であるかは明確ではありませんが、ドキュメント レベルでマウスダウンを処理して、適切なコントロールを自分で見つけることができます。したがって、自分で感度を下げることができます。

すなわち。次の擬似コードのようなもの

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

マウスオーバー イベントが発生したら、アイテムの上に透明な div を表示します。これは、両側で 5 ピクセル大きくなります。巧妙な CSS スタイルを使用すれば、javascript を必要としない場合もあります。

「純粋な CSS 階層メニュー」を検索してください。

于 2012-07-26T04:50:52.853 に答える