マウス/キー/タッチが押されたときにのみチェックされるチェックボックスがあるjQueryアプリケーションを作成しています。マウスダウンをオンにし、マウスアップをオフにします。
を使用してもevent.preventDefault()、マウスボタンが押されていなければチェックボックスはオンのままですが、スペースバーは正常に機能します。
$(function() {
var cb = $("input");
cb
.on("mousedown keydown", function(event) {
event.preventDefault();
cb.prop("checked", true);
})
.on("mouseup keyup", function(event) {
event.preventDefault();
cb.prop("checked", false);
});
})<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox autofocus>上記のコードは、どのような状況（タッチなど）でも正しく機能するために少し作業が必要であることを知っていますが、テスト目的でのみ記述されています
この問題は、チェックボックスでリリースされたclickときにイベントが発生しmouseup、これによりcheckedプロパティが強制的に実行されるためtrueです。このフックを修正するには、イベントハンドラーをにフックし、それをclick呼び出すだけpreventDefault()です。
またon()、on()複数回呼び出す代わりに、フックするイベント名がキーとなるオブジェクトを提供できることにも注意してください。
$(function() {
var $cb = $("input");
$cb.on({
"mousedown keydown": function(e) {
e.preventDefault();
$cb.prop("checked", true);
},
"mouseup keyup": function(e) {
e.preventDefault();
$cb.prop("checked", false);
},
'click': function(e) {
e.preventDefault();
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox autofocus>または、@ enapupeがコメントで指摘しているように、mouseupイベントハンドラーを完全に削除し、デフォルトのclickイベントを通常どおり実行して、チェックボックスの状態を切り替えることができます。
$(function() {
var $cb = $("input");
$cb.on({
"mousedown keydown": function(e) {
e.preventDefault();
$cb.prop("checked", true);
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type=checkbox autofocus>どちらでも機能しますが、clickイベントの抑制に関して必要な動作によって異なります。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加