4

クリック深度が指定されているボタンがあります（つまり、：active状態で数ピクセル下に移動します）が、ボタンがクリックされても何も起こらないという問題が発生しています。

<button>Button</button>

button:active {
    margin-top: 5px;
}

私はjsfiddleで問題を説明しました：

http://jsfiddle.net/helenst/vUU55/

Chromeでは、テキストの上下にクリックの深さに等しい高さの薄いストリップがあり、クリックイベントは発生しません。（たとえば、「B」の1〜2ピクセル上をクリックしてみてください）mousedownとmouseupの両方が受信されますが、クリックは発生しません。

FirefoxとOperaでは、ボタンの上部に同じサイズの領域があり、マウスのクリックが反応しません。マウスダウンはボタンの内側にありますが、マウスアップはボタンの外側にあるという点で、これは少し論理的です。この領域をクリックして、ボタンを離す前にマウスをボタンにドラッグして戻すと、クリックがアクティブになります。

ただし、それでも完全には意味がありません。コンテナをボタンの周りにラップし（すべてのボタンの状態がその中に含まれるように）、コンテナのイベントを検出すると、問題は引き続き発生します。

クリック深度を削除すると、すべて問題ありません。

マウスダウンイベントに応答させてから、ドキュメントでマウスアップを検出できると思いますが、これは回避できる可能性がありますが、通常のボタンの動作に違反しているため、JavaScript以外のソリューションが必要です。誰か助けてもらえますか？

4

1 に答える 1

1

padding-topを使用して：activeスタイルを機能させることができる場合（または境界線の内側にあるもの-border-topを5pxに設定しても機能する可能性がありますが、テストされていません）。もちろん、それはあなたのスタイリングをいくらか壊しますが; 背景の上部に配置された水平バーの画像は、必要に応じて上部の境界線を置き換えることができますが、ハッキーなアイデアです）。

申し訳ありませんが、現在、新しいブラウザでテストすることはできません。このタイプのボタンは以前にも何度か見たことがありますが、この問題にどれだけうまく対処できるか、どのコードを使用しているかをテストするための手に負えないものを思い出せません。

これはほとんど新しい答えになりましたが、SOはそれをあまり好きではありません。私が見た他の選択肢は、非常に大きな深さ（動き）を追加するのは難しいですが、ボーダースタイルでインセットとアウトセットを使用することです。

于 2012-11-22T14:56:17.043 に答える