3

これは非常に簡単です。

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled=false;">

このボタンの上にマウス カーソルを置くと、無効になります。しかし、カーソルを外に移動すると、有効になりません...ブー。

無効にするという概念は、それを使用して何もできないことを意味することを理解しています。しかし、マウスアウトで有効にするにはどうすればよいでしょうか? 出来ますか？何か不足していますか？

4

4 に答える 4

5

代わりにマウスアウトを設定する必要がありますdisabled = ''。

<input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;" onmouseout="this.disabled='';">

無効なプロパティは、それが存在するかどうかを確認するだけです。disabled='anything' を設定すると、無効になります。以前は、属性にキーワードのみが必要でしたdisabledが、有効な XHTML では、すべての属性を何かに等しく設定する必要がありました。

編集: これを少しいじって、SPANタグにパディングを追加すると、イベントが適切に機能するようになりました。パディングがないと、入力ボタンが無効になるため、イベントがトラップされません。SPAN使い切った部分がわかりやすいように背景を赤くしました。

<span style="padding: 8px; background: red;"  onmouseout="this.firstChild.disabled='';"><input type="button" name="test" id="test" value="roll over me" onmouseover="this.disabled=true;"></span>
于 2009-11-16T19:03:24.377 に答える
3

Divs to the Rescue!

残念ながら、誰もこの質問に本当に答えていません。できます*。

<div style="display: inline-block; position: relative">
<input type="button" id="button" disabled="disabled">
<div id="buttonMouseCatcher" style="position:absolute; z-index: 1;
  top: 0px; bottom: 0px; left: 0px; right: 0px;">
</div>

それで：

  • 次のようなマウスオーバー ハンドラを buttonMouseCatcher に配置します。
    • z-index を -1 に変更し、
    • ボタンを有効にします。
  • 次のようなマウスアウト ハンドラーをボタンに配置します。
    • buttonMouseCatcher の z-index を 1 に戻し、
    • ボタンを無効にします。
于 2012-02-16T23:55:57.467 に答える
1

仕様により、無効なフォーム要素はマウスイベントを発生させません。

私が回避策として使用するのは、「無効な」クラスとそれに関連付けられたイベント ハンドルを使用して、無効な動作をシミュレートすることです。ボタンにはうまく機能しますが、テキスト入力やチェックボックスにはうまくいかないと思います。

于 2011-07-07T19:10:20.320 に答える
0

それを囲む外側の要素を持ち、内側の要素を有効にするその外側の要素の onmouseover を持つことができます。

于 2009-11-16T19:03:39.790 に答える