9

css "：active"疑似クラスを使用して、クリックされたときにdivをアニメーション化しようとしています。divは、右に10ピクセル、下に10ピクセルシフトされます。

#myButton:active {
    margin:10px 0 0 10px;
}

ここで完全な例を参照してください：http：//jsfiddle.net/WdABS/

問題は、divの上部または左側の境界線（jsFiddleの例では赤）をクリックすると、ボタンを離したときにマウスポインタがdivの上に表示されなくなることです。したがって、マウスアップもクリックも発生しません。

技術的に言えば、この動作は完全に理にかなっています。ただし、これは最終的なユーザーが期待するものではなく、クリーンで簡単な方法で修正する方法がわかりません。移動するdivの周りに親コンテナを配置し、そこからクリックイベントをキャッチしようとしましたが、それは物事をより複雑にしているように見え、あまりうまく機能しませんでした。

読んでくれてありがとう！

4

2 に答える 2

5

純粋なCSS：疑似要素を使用する

これは、IE8 +、Firefox、およびChromeで機能します（これらはすべてテスト済みです）。このフィドルを参照してください。

#myButton:active {
    margin:10px 0 0 10px;
}
#myButton:active:before {
    content: '';
    position: absolute;
    top: -20px; /* border plus shift amount */
    right: 0;
    bottom: 0;
    left: -20px; /* border plus shift amount */
}

要素が正しく配置されるように#myButtonする必要がありますposition: relative。absolute:before

純粋なCSS：境界線自体でシフト（CSS3）

ボタンにまだ境界線がない場合は、borderプロパティ自体（透明な色）を使用してbackground-clip（ボタンの色が境界線と重ならないようにするため）、同じ機能を取得できます。このフィドルを参照してください。

#myButton:active {
    border-top:10px transparent solid;
    border-left:10px transparent solid;
    background-clip: padding-box;
}
于 2013-01-23T18:10:38.820 に答える
3

mouseupしたがって、私の考えは、イベントハンドラーが起動されたときに、イベントハンドラーをドキュメントにバインドすることmousedownです。mouseup次に、実行したいコードを実行できますclick。これを示すフィドルがあります。

$(document).ready(function() {
    $('#myButton').mousedown(function() { 
        debug('button down'); 
        $(document).on('mouseup', function(){
            $(document).off('mouseup');
            debug('button up');
            debug('click'); 
        });
    });
});

function debug(msg) {
    $('#debug').append('[' + msg + ']');
}
于 2013-01-23T18:29:05.540 に答える