2

これが私のフィドルです：http://jsfiddle.net/olexander/7hB8C/

ボタンとしてスタイル設定されたアンカーがあります (スタイルは問題を示すために単純化されています)。

HTML:

<a href="javascript:void(0)" class="button demo">Button</a>

CSS:

.button {
    border: none;
    outline: none;    
    text-decoration: none;
    display: inline-block;
}

.button:active {
    transform: scale(0.8, 0.8);
    -webkit-transform: scale(0.8, 0.8);
    -moz-transform: scale(0.8, 0.8);
    -o-transform: scale(0.8, 0.8);
    -ms-transform: scale(0.8, 0.8);
}

.demo {
    padding: 40px;
    margin: 20px;
    font-size: 5em;
    color: black;
    background-color: lightgray;
}

問題は、リンク ボタン内にクリックできない領域があることです。アンカーの内側にテキストノードがあり、mousedown がテキストノードに移動すると、transform 後、mouseup がテキストノードの外にあると説明できます。これが、mouseclick が処理されない理由です。

アンカー内のテキスト ノードを選択すると、次のように視覚化できます (マウスダウンの前後)。 テキストノードの境界をクリックしてもクリックイベントが発生しない

この問題は、少なくとも Chrome、Opera、および Safari で再現されることに注意してください。クリック イベントを処理する代わりに、href タグへのリンクを配置しても問題は再現されます。最初の値はコンテンツを使用し、2 番目の値を使用するため、<button>の問題ではなく で再現されます。<input type="button">

この動作を回避または回避するためのより良い方法についてアイデアを持っている人はいますか? 前もって感謝します！

アップデート：

ストレッチされた「スタブ」を使用し<span>てクリック可能な領域をオーバーライドする解決策を見つけました。

<a href="javascript:void(0)" class="button"><span class="stub"></span>Button</a>

およびスタブ スタイル:

.button > span.stub {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

このバージョンはここで公開されています: http://jsfiddle.net/olexander/7hB8C/20/

スタブは JavaScript によって動的に追加できますが、考え方は変わりません。インライン スパン要素はアンカーとボタン内にネストできるため、W3C HTML5/XHTML5 ルールに違反しません。

そして、Aequanox はソリューションを完璧にしました! 以下の答えを見てください。

ストーリー全体はここで公開されています: Animated anchor and button with css3

4

2 に答える 2

1

:active移行はクリックイベントに取って代わっているようです。これはブラウザのバグだと思います。

ここで:activeクラス名に変更し.active、イベントハンドラーに適用します。

$('#linkbutton').click(function(){
    $(this).addClass('active');    
    $(this).delay(200).queue(function() { $(this).removeClass('active');})
    $('#logContainer').append('<span>clicked </span>');    
});

何らかの理由で、.buttonを次のように変更するまでこれは機能しませんでした。

display: inline-block;

に：

float: left;

図を見てください...それは今でも動作します。

于 2013-03-03T16:31:54.100 に答える
1

これをcssに挿入することで、タグの挿入を回避し、マークアップクリーナーを維持できます。

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

ただし、テキストは選択できません

于 2013-03-13T20:42:47.623 に答える