8

WebKit ブラウザ (私は Mac の Chrome と Safari でテストしました) では、ボタン要素の動作がおかしくなりました:

このフィドルhttp://jsfiddle.net/5ReUn/3/では、次のことを行います。

  1. カーソルが HTML ボタン テキストの上にあるときに、マウスの左ボタンを押します。
  2. テキストのないボタンの領域にカーソルを (押しながら) 移動します。
  3. マウスボタンを放します

次に、ボタン要素のクリック イベントが発生しません。

HTML は非常に単純です。

<button id="button">Click</button>

また、CSS はまったく洗練されていません。

button {
    display: block;
    padding: 20px;
}

クリック キャッチ用の JS:

button = document.getElementById('button');
button.addEventListener('click', function() {
    console.log('click');
});

私のサイトへの訪問者の多くは、ボタンをクリックできないと不満を漏らしています。クリックしながらカーソルを動かしていることに気づきません。

誰かがこれに対する回避策を見つけましたか?

4

4 に答える 4

13

WebKit のバグであることが判明しました。

JavaScript 以外の簡単な解決策は、テキストを SPAN 要素で囲み、クリックスルーにすることです。

<button>
    <span>Click Me</span>
</button>

CSS の例:

span {
    display: block;
    padding: 20px;
    pointer-events: none;   // < --- Solution!
}

このバグは WebKit にのみ発生するため、サポートしていないブラウザーはpointer-events無視できます。

于 2013-03-29T06:40:51.930 に答える
1

ここでは、クリックする代わりにドラッグしようとしています。mousedownそのため、代わりにイベントを試してください。

//This is same as click event
var down = false;
var button = document.getElementById('button');
var info = document.getElementById('info')
button.addEventListener('mousedown', function() {
    down = true;  
});


button.addEventListener('mouseup', function() {
    if(down){
        info.innerHTML += "click ";
        down = false;
    }
});

jsfiddle

于 2013-03-28T10:59:41.423 に答える
1

別の解決策が見つからない場合は、mousedownイベントの代わりにイベントを使用できますclick。

通常とは動作が異なるため、これは最善の解決策ではありません。通常、ユーザーは、指がマウス ボタンから離されたときにアクションが発生することを期待しています。指がマウス ボタンを押しているときではありません。

于 2013-03-28T11:00:13.920 に答える
0

同じ js/jquery をバインドして、ボタンの周りに div を追加できます (マージンは 20px?)。そうすれば、クリックを逃しても（笑）、スクリプトは引き続き起動します。ただし、ボタンを押したままマウスをボタンからドラッグしても、ボタンは何もしないことに気付きました (ページだけで発生するわけではありません。つまり、Facebook ログイン ボタンやこの Web サイトのボタンで試してみてください)。 .

于 2013-03-28T10:53:13.357 に答える