2012-03-24 10 views
4

を移動する場合、私はこのような単純なボタンを持って発生しません。 mousedownとmouseupの間でマウスが一定量のピクセルを移動した場合は、これをクリックします。これにより、ユーザーは情報を送信していないと信じることができます。onClickイベントは、マウス

これはChromeで発生しています。他のブラウザをテストしていない。

ボタンのどこをクリックして放してもイベントが発生します。

編集:Firefoxでも同じことが起こっていますが、視覚的にはリンクをドラッグしているようです。このようにして、ユーザには提出しないことが少なくとも意味がありますが、Chromeでは何が起こっているのかといった視覚的な指標はありません。

+3

実際には、クリックする代わりにドラッグするだけです。これは通常のブラウザの動作です。 –

+1

これは仕様です。より良い解決策は、正常に送信されたときにユーザーに通知することです。 – mellamokb

+0

Topener:何が起きているのか理解していますが、Chromeはドラッグしているという視覚的な手がかりを与えていません。 mellamokb:しかし、何も提出していないユーザーはこの通知を期待していません。 – OMGKurtNilsen

答えて

0

ソリューションれるonmousedown上でpreventDefault()を行うことでした。

$(".button").mousedown(function(event){ 
    event.preventDefault(); 
    return false; 
}); 
+0

これは純粋なjQueryですね。 –

+0

さて、私はそれを使っていたのでjqueryを使って解決しました。そのアイデアは、オブジェクトのドラッグを止めるために、マウスダウンのイベントに対するデフォルトのアクションを防ぐことです。 – OMGKurtNilsen

+0

私は知っている、いい人。しかし、私はjQueryタグを見ることができません –

3

クリックは、「マウスボタンを押したままマウスボタンを放す」と定義されています。これは、同じエレメント上で実行されるマウスダウンイベントとマウスアップイベントの組み合わせです。ユーザーが要素から離れた場合、ユーザーは単にクリックを実行しなくなり、単純にマウス操作(マウス出力、別の要素のマウス操作)も実行されます。

これは標準的な直感的な動作です。ユーザーは、マウスを移動させない限り、クリックが「問題」になるとは考えていません。

あなたのアプリケーションでは、あなたのために起こったこの提出の結果をクリックするのが本当に重要なのですが、onclickと一緒に行くのではなく、onmousedownで行ってください。

<a class="button" href="javascript:void(0);" onmousedown="submitActivity();">Add</a> 

EDIT:問題が誤解されました。おそらく、私はあなたがあなたのために動作しますのために働くために使用しています。この構文:

<INPUT type="button" value="Add" name="add_button" onClick="submitActivity()"> 
+0

これは、オブジェクトが解放される前に数ピクセル移動している限り、カーソルがオブジェクトから離れることはありません。 onmousedownを持っているのは、ボタンが通常どおりに動作しているか+能動的なスタイリングが効かないため、実際には良い解決策ではありません。 – OMGKurtNilsen

+0

どうすればマウスのダウンやマウスの重大な動きを防ぐことができますか?また、同じ要素をマウスで押し上げるとonclickが発生しますか?たとえば、要素がdocument.bodyなので、あなたがどれだけ遠くに移動しても、それはまだクリックです(あなたはそれが欲しくないのですが)? – Michael

0

Demo fiddle

<a class="button" href="javascript:void(0);" onMouseDown="submitActivity();">Add</a> 
0

私は同じ問題に応じたが、別のコンテキストでつまずきました。 カスタムボタンを作成し、divsをonclick = "..."とし、子divをボタンのテキストとアイコンとして配置しました。 mousedownとmouseupの間で子divの上に1ピクセルもカーソルを移動すると、親divはclickイベントを発生させないmouseoutイベントを生成しました。私はmouseoutイベントを無効にする方法を見つけることができませんでしたが、この問題に対する単純なCSSソリューションを発見しました。

.buttondiv * { 
    pointer-events: none; /* prevent click problems in buttons containing child divs */ 
}