9

:active 疑似クラスの相対的な位置と top: 1px を使用してクリックすると、押し下げ効果のあるボタンをしばらく使用しています。

クリック イベントが発生しないという問題がありましたが、同じ要素で mousedown イベントと mouseup イベントが発生しないことが原因であることが判明しました。最も内側の要素がボタン全体を覆うように少しいじりましたが、問題が残っていることがわかりました。

テキストの上部を右クリックすると、リンクが下にジャンプして (mousedown イベントが発生)、その後元に戻ります (mouseup イベントが発生します) が、クリックは発生しません。テキストの中央またはテキストから離れたところをクリックすると、すべて問題ありません。

ここで考えられる唯一のことは、textNode がカーソルの下にないため、mousedown イベントが textNode で発生し、mouseup イベントがアンカー要素で発生していることです。イベント オブジェクトをキャッチし、firebug を使用してターゲットを調べると、そうではないことがわかりますが、別の説明は思いつきません。少し読んでみると、Safari の textNodes で発生するイベントについての言及がいくつか見つかりますが、この不一致については何もありません。

次のスニペットを使用すると、問題を再現できます。テキストの上部、または 1 ～ 2 ピクセル上をクリックする必要があります。この問題は、1 行のピクセルでのみ発生します。

<style>
a.button-test {
 display: inline-block;
 padding: 20px;
 background: red;
}
.button-test:active {
 position: relative;
 top: 1px;
}
</style>
<a class="button-test" href="#">Clickedy click</a>

CSSをいじったり、インラインブロックを使用したり、パディングの代わりに行の高さを増やしたりしても、ここでは効果がないようです。私は多くの組み合わせを試しました。私のテストのほとんどは Firefox で行って、イベントにバインドし、firebug を介して何が起こっているかを記録できるようにしましたが、他のブラウザーでもこの問題が発生します。

アクティブジャンプを失うこと以外に、これについて提供できるインスピレーションを誰かが持っていますか? できればこの効果を維持したい。

本当にありがとう、

ドム（しゃれなし）

4

2 に答える 2

1

jQueryでカスタムイベントを使用する私の回避策は次のとおりです

var buttonPressed;
// Track buttonPressed only on button mousedown
$(document).on('mousedown', 'button', function (e) {
    // Make sure we store the actual button, not any contained
    // element we might have clicked instead
    buttonPressed = $(e.target).closest('button');
});
// Clear buttonPressed on every mouseup
$(document).on('mouseup', function (e) {
    if (buttonPressed) {
        // Verify it's the same target button
        var target = $(e.target).closest('button');
        if (target.is(buttonPressed)) {
            buttonPressed.trigger('buttonClick');
        }
        buttonPressed = null;
    }
});

$('button').on('buttonClick', function (e) {
    // Do your thing
});

ネイティブのクリック イベントとボタンクリック イベントの両方を処理しないようにしてください。

于 2012-05-31T12:31:28.160 に答える
0

スタイルをトップに変更すると、この問題を再現するのがはるかに簡単になります：10px

于 2010-01-21T17:55:10.447 に答える