2

私のプロジェクトの 1 つで、カスタム カーソル onmousedown を変更し、onmouseup と onmouseout に戻す必要があります。現時点では、Chrome で動作させることにのみ関心があり、後でさまざまなブラウザーについて確認します。

そこで、次のコードから始めました。

html:

<div id="firstspot"></div>

CSS:

#firstspot {
position:absolute;
width:145px;
height:145px;
margin-left:58px;
top:144px;
cursor:url(img/cur/hand-point-right.cur),wait;
}

#firstspot:active {
cursor:url(img/cur/hand-grab-right.cur),wait;
}

必要な変更は、マウスを最小限に 1 回動かした後にのみ発生するようです。マウスをさらに大きく動かすと、カーソルはデフォルトで「テキスト」カーソルになります。

ただし、カーソルの代わりに背景画像の onmousedown 変更を試みると、onmousedown で動作します! ~~~~~~~~~~~~~~~~

次に、javascript: html を使用して次のコードで目的の効果を得ようとしました。

<div id="firstspot" onmousedown="chcursor();" onmouseup="chback();" onmouseout="chback();"></div>

CSS:

#firstspot {
position:absolute;
width:145px;
height:145px;
margin-left:58px;
top:144px;
cursor:url(img/cur/hand-point-right.cur),wait;
}

JavaScript:

function chcursor ()
{
document.getElementById('firstspot').style.cursor = "url(img/cur/hand-grab-right.cur),wait";
}

function chback ()
{
document.getElementById('firstspot').style.cursor = "url(img/cur/hand-point-right.cur),wait";
}

onmouseup と onmouseout の追加は完全に機能しますが、これは実質的に同じ遅延効果を生み出しました。したがって、つかむ手のカーソルは、マウスダウン後にマウスを 1 回最小限に動かした後にのみ表示されます。~~~~~~~~~~~~~~~~~~~~`

調査により、イベント バブリングと呼ばれるものが明らかになりました。

この現象のテスト/制御を開始したいと考えており、誰かが私を正しい方向に向けることができることを望んでいました.

これまでのところ、「できません」に遭遇し、目的のカーソル変更を作成できませんでした。

私は js ライブラリを使用するよりも純粋な JavaScript ソリューションを好みます (数行の js しか必要としないソリューションに何キロものライブラリを追加するのはなぜですか?) が、どちらにも感謝します。

PS、私はプロの Web 開発者ではないことに注意してください。

4

1 に答える 1

0

return false「onmousedown」およびその他のイベントハンドラーの最後にa を含める必要があると思います。これにより、「イベントのバブリング」が防止されます。

次の例を参照してください: http://jsbin.com/ifitah/1/edit

于 2013-01-29T13:04:57.717 に答える