7

クリックしたときにボタンを「押す」ようにします。ただし、私が試みた方法には望ましくない効果があります。ボタンの特定の場所での一部のクリックが登録されていません。

この質問は JavaScript に関するものではありません。JavaScript クリック イベント リスナを使用する以下の JSFiddle にリンクしましたが、これは問題をより適切に説明するためだけのものです。私が直面している実際の問題は、イベントリスナーとは何の関係もありません.さまざまな場所でクリックすると、ハイパーリンク自体が機能しません:active.クリックさえなかった場合）。

太いボタン私がスタイリングしようとしている太くて押しやすいボタン。

私が使用しているCSS：

a.fatButton {
    display: inline-block;
    position: relative;
    margin: 8px;
    padding: 16px;
    background: #faa;
    border-radius: 16px;
    box-shadow: 0 8px 0 0 #f88;
    text-decoration: none;
    color: #000;
}
a.fatButton:active {
    top: 8px;
    box-shadow: none;
}

コンテナ div 内のボタンの HTML:

<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>

問題をより詳細に説明している JSFiddle は次のとおりです: http://jsfiddle.net/g105b/d3Y9X/

そして、ここに問題の記録があります: http://youtu.be/N6UfWdbA1Ac

問題は、ボタンに何らかの動きがある場合です...これは、「トップ」プロパティの変更である可能性があります-この例のように-margin-top、負のmargin-bottom、translateY、padding-top .. . この問題を起こさずに、このタイプのボタンを押す効果を作成する方法があるに違いありません。

ビデオの録画に使用された Chrome 29 を使用していますが、問題は Firefox 23 でも明らかですが、「不発領域」は Firefox 内のボタンの別の場所にあります。

4

5 に答える 5

3

:active セレクターでボタンを移動しているためです。要素の上部が 8px 変化します。これは、クリック イベントが Javascript に登録される前に発生します。したがって、上位 8 ピクセル内をクリックすると、クリックは登録されません。

:active 内の padding-top 値も変更することで、同じ効果を得ることができます。

a.fatButton:active {
    top:8px;
    padding-top:16px;
    box-shadow: none;
}

更新されたフィドル: http://jsfiddle.net/NT5e2/

于 2013-09-10T18:06:18.033 に答える
1

「クリック」の代わりに「マウスダウン」を使用すると、この問題を解決できると思います

更新されたフィドル: http://jsfiddle.net/d3Y9X/8/

document.querySelector("a.fatButton").addEventListener("mousedown", function(e){
    c++;
    csp.textContent = c;
    e.preventDefault();
    return false;
});
于 2013-09-12T07:40:08.750 に答える
0

位置の問題のようです位置を削除します：相対新しいコードで動作します...

a.fatButton {
    display: inline-block;

    margin: 8px;
    padding: 16px;
    background: #faa;
    border-radius: 16px;
    box-shadow: 0 8px 0 0 #f88;
    text-decoration: none;
    color: #000;
}
a.fatButton:active {
    top: 8px;
    box-shadow: none;
}
<div id="linkContainer">
    <a class="fatButton" href="#">Click me</a>
</div>
于 2013-09-21T10:28:02.013 に答える