13

ボタンに :active 疑似クラスを使用して、クリック時のパディングと境界線の色を変更しました。これは、ボタンの押下を視覚的に模倣します。例を参照してください。

FFで活躍。ただし、Chrome では、クリックが常に登録されるとは限りません。具体的には、ボタン内のテキストをクリックして押したままにしてから、テキストを (ただしボタン内にあるまま) ドラッグすると、クリックは発生しません。パディングをクリックしてテキストにドラッグしても同じです。

FF と Chrome のボタンとパディングについて奇妙なことを読んだことがありますが、この問題を解決する方法がわかりません。

4

6 に答える 6

14

解決策：クリックするものを1つだけ与える

にを追加し、position: relative次のような疑似要素buttonでオーバーレイします。:before

button:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

私のバグを解決したようです。このフィドルを参照してください。クリックされたときにフォーカスする単一の「要素」を与えることで、バグ（バグだと思います）を解決すると思います。

于 2012-05-30T00:19:17.463 に答える
4

これを試してください：http://jsfiddle.net/uPZuJ/9/

mousedownとmouseup同じ要素の両方をチェックする代わりにmousedown、ボタンのみをチェックしてmouseupから、他の要素をチェックします。

于 2012-05-28T19:21:00.920 に答える
1

これを試して：http://jsfiddle.net/uPZuJ/22/ http://jsfiddle.net/uPZuJ/25/

仕組みは次のとおりです。

  1. 'down'をfalseに初期化します
  2. ボタンをマウスダウンすると、「下」が真になります
  3. マウスアップ/クリックで、「down」がtrueの場合、テキスト「click」を追加し、「down」をfalseに設定します

クリックするとクリックがトリガーされます。

テキストをパディングにドラッグすると、クリックがトリガーされます。

パディングをテキストにドラッグすると、クリックがトリガーされます。

内側から外側にドラッグしてもクリックは発生しません。

外側から内側にドラッグしてもクリックは発生しません。

コードは次のとおりです。

var down=false;
$("button").mousedown(function() {
    down=true;
});
$("button").mouseup(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});
$("button").click(function() {
    if(down) {
        $("#clicks").append("<div>click</div>");
    }
    down=false;
});
于 2012-05-29T22:08:31.710 に答える
1

ボタンはChromeでうまく機能します。CSSの数行とIEの属性によって、「ボタン内のテキストをクリックアンドホールド」することを修正しました。 http://jsfiddle.net/uPZuJ/2/

編集：これは私が修正したバグのスクリーンショットです：

ここに画像の説明を入力してください

于 2012-05-15T21:52:01.227 に答える
0

「クリック」の代わりに「マウスアップ」を使用してください。つまり、chrome と ff で動作するはずです。

 var elementName = "";

    $("button").mouseup(function() {

        if (elementName != "" && elementName == "BUTTON") {


            $("#clicks").append("<span>click</span><br/>");
            elementName = "";
        }

    });


    $("button").mousedown(function() {

        elementName = $(this).get(0).tagName;

    });
于 2012-05-29T10:00:33.363 に答える
0

あなたの例で遊んだ後、舞台裏で何が起こっているのかがわかったと思います。デフォルトでは、クリック イベントは、コールバックを起動する前に、mousedown イベントと mouseup イベントの両方が起動されることを確認します。問題は、テキストをクリックすることです。現在のターゲットはテキストです(これは、テキスト領域内でマウスダウンイベントが既に発生しており、クリックイベントを完了するためにマウスアップイベントが発生するのを待っていることを意味します)。ただし、カーソルをテキストの外にドラッグし、テキスト領域の外でマウスを放すと、現在のターゲットはテキストではなくボタンになりました(マウスアップイベントはテキスト領域内では発生しませんが、ボタン領域内で発生します)、クリックイベント起こりません。ただし、テキストをクリックしてドラッグし、テキスト領域内でマウスを離すと、問題なく動作します。これは、イベントのバブリングまたはキャプチャの問題です。

私が提案するのは、クリック イベントの代わりに mousedown および mouseup イベントを使用することです。

于 2012-05-29T09:44:47.227 に答える