4

JavaScriptボタンとして使用しているDIV要素があります。特定の領域をクリックしない限り正常に動作し、クリックイベントはまったくトリガーされません。これは Chrome のみの問題のようです。

HTML

<div class="button">Close</div>

Javascript

$('.button').on('click', function(e) {
    var currentDate = new Date();
    $debug.html('Clicked: ' + currentDate.getMinutes() + ':' + currentDate.getSeconds() + ':' + currentDate.getMilliseconds());
});

http://jsfiddle.net/cellenburg/uwGK4/

左側のテキストの開始位置を正確にクリックしない限り、ボタンのどこをクリックしても問題なく動作します。私のフィドルの場合、文字「C」の左側をクリックします。イベントが発生しないことがわかります。これは小さな領域ですが、ほぼ毎回クリックしているようです。

私はすべてを試しました。クリックを受け入れるテキストノードに問題があり、その親に伝播していないと思いますか? この問題を回避する方法はありますか?

4

2 に答える 2

4

問題は、テキストを選択しようとする「試み」にあるようです。

これを CSS に追加します。

body {
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
}

フィドルの更新は私にとってクロムで機能しました：

http://jsfiddle.net/uwGK4/1/

また、ただの考えです。「ボタン」テキストが選択できないようにするために、本文からこれまでにないものに変更できます。

更新しました：

これを破ることができるかどうか教えてください！私もできていません。基本的に、パディングを削除し、高さと幅を宣言し、Close を<div>呼び出されたクラスでラップして、.labelそのマージンを設定しました。

http://jsfiddle.net/uwGK4/5/

新しい JS:

.label{
    margin: 5px;
}

新しい HTML:

<div class="button"><div class="label">Close</div></div>

.buttonおよびからパディング CSS を削除し.button:activeました。

于 2013-02-21T18:17:09.333 に答える
1

:active イベントからパディングの変更を削除してみてください。テキストをクリックしているときにテキストの開始を移動すると、奇妙な動作が発生していると思います。ボタンの外観が変わることは認めますが、これはちょっと不自由です。

また、パディングを非常に高くしてみてください（ のようにpadding:60px 90px 40px 110px;）。テキスト自体の任意の場所をクリックすると、クリック アクションよりもドラッグ アクションのように扱われることがわかります。

ちなみに、これはWindows用のSafariでも発生するので、WebKitのことではないかと推測しています。

バグレポートを提出する価値があるかもしれません。

于 2013-02-21T19:13:25.727 に答える