好きなだけ多くのイベントでデフォルト アクションを防止することができます。通常、ブラウザはこれを許可しますが、最終的な決定権を持っていることに注意してください (これが常に機能するとは限らないいくつかの問題をぼんやりと覚えています)。
var events = ["keypress","click","submit","focus","blur","tab"];
events.forEach(function(eventName){
window.addEventListener(eventName, function(e){
// this is the list of tags we'd like to prevent events on
// you may wish to remove this early return altogether, as even a div or span
// can cause a form to submit with JavaScript
if (["INPUT","A","FORM","BUTTON"].indexOf(e.tagName) === -1) {
return;
}
// prevent the default action
e.preventDefault();
// stop other JavaScript listeners from firing
e.stopPropagation();
e.stopImediatePropagation();
// if an input is somehow focused, unfocus it
var target = e.target;
setTimeout(function(){
if (target.blur) target.blur();
}, 50);
// true as the third parameter signifies 'use capture' where available;
// this means we get the event as it's going down, before it starts to bubble up
// our propagation prevention will thus also prevent most delegated event handlers
}, true);
});
これは CSS では解決できません。 pointer-events
どのポインター イベントが問題ないかを指定することはできません。そのためには、JavaScript が必要です。