ボタンのテキストをクリックして離したとき（ボタンの内側にある場合）、ボタン要素はクリックイベントを発生しませんか？ WebKitのブラウザで

Question

（私はMac上のChromeとSafariでテストした）、ボタン要素が奇妙な振る舞い：

温家宝このフィドルでhttp://jsfiddle.net/5ReUn/3/あなたは次のようにします。カーソルが上にあるときに、

1. 押して、マウスボタンを左HTMLボタンテキスト
2. テキストずにボタンの領域に（押しながら）カーソルを移動し
3. リリースマウスボタン

ボタン要素のクリックイベントは発生しません！

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

とCSSは全く洗練されていません：

HTMLは非常に簡単で、クリック用

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

JSがキャッチ：

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

多くの来場者を自分のサイトに文句を言いますそのボタンはクリックできません。クリックしている間にカーソルを動かしていることはわかりません。

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

Answer 1

a bug in WebKitとなります。

迅速な非JavaScriptのソリューションは、SPAN要素のテキストをラップし、それがクリックスルーすることです：

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

例CSS：

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

バグが唯一のWebKitに表示されますので、 pointer-eventsをサポートしていないブラウザは無視できます。

Answer 2

同じjs/jqueryがバインドされた状態で、divの周りにdivを追加できます（余白のように、20px？）。そうすれば、もし彼らが逃げようとするなら（LOL）、スクリプトはまだ発砲するでしょう。しかし、押されている間にマウスをボタンから離しても、ボタンは何もしません（あなたのページでは起こらない、つまりFacebookのログインボタンやこのウェブサイトのボタンを使ってみてください） 。

Answer 3

ここでは、をクリックする代わりに、をドラッグしようとしています。だから、代わりに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

Answer 4

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

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