3

このボタンを見てください: http://jsfiddle.net/vtortola/Dnxpe/

I Chrome では、上部の境界線をクリックすると、「:hover」および「:active」の CSS ルールがトリガーされても、イベントはトリガーされません。中央をさらにクリックすると、正常に機能します。

IE9 で同じことを行うと、クリックの 50% が失われます。

問題はマージンです。マージンスイッチをクリックすると、ボタンが押されたような効果が得られますが、上部の境界線をクリックするとポインターがボタンから外れますが、イベントはすでにトリガーされているはずです。 …どうしてこうなった？

ありがとう。

4

3 に答える 3

3

これはおそらく、aclick()が両方とも 1 回だけ完了したと見なされmousedown()、mouseup()連続して完了したために発生します。上部の境界線の近くをクリックしてmouseup()もトリガーされず、同じことが にも当てはまりますclick()。

mousedown() を使用すると、毎回機能しますが、クリック全体が完了する前に発生します。

$('button').mousedown(function(e){
    $('#clicks').append('<span>click </span>');
});

これを解決するには、次のようにします。

ボタンにコンテナーを追加してから、ボタンにmousedownハンドラーを追加し、コンテナーにハンドラーを追加しますmouseup。両方が呼び出されたことを確認すると、ボタンのクリック イベントが実行されたことを確認できます。

そのようです：

HTML

<div id="cont"><button>Click me</button></div>
<div id="clicks">
</div>​​​​​​​​

JavaScript

var mdown = false;

$('button').mousedown(function(e){
    mdown = true;
});

$('#cont').mouseup(function(e){
    if (mdown)
    {
        $('#clicks').append('<span>click </span>');
        mdown = false;
    }
});

​
于 2012-07-13T10:46:14.067 に答える
2

私はあなたのコードをチェックして、面白いバグを見つけました。それはCSSのせいです。あなたもそのバグを再生することができます。

手順：1。上部の境界線の近くにあるボタンをクリックしますが、マウスから指を離さないでください。2.ここで、ボタンを見てください。ボタンは実際に押し下げられているため、ボタンクリックイベントを発生させることはできません。

解決：

ボタンがアクティブなときにマージンを削除します。

button:active,input[type=submit]:active
{
   box-shadow: 0px 0px 3px 3px #D8F6CE;
}

お役に立てば幸いです。

于 2012-07-13T10:51:36.893 に答える
2

css psudo要素を使用してクリックイベントをキャプチャする、私が思いついたソリューションを次に示します。ここでの利点は、javascript が必要ないことです。クリック イベントは常に :after によってキャプチャされ、ボタンまでバブルします。

http://jsfiddle.net/kevinrockwood/fUuUB/1/

注意すべき主なことはcssです：

button:after{
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
于 2013-02-01T20:29:24.643 に答える