IEでevent.preventDefault()関数が機能しない
-
05-07-2019 - |
質問
以下は私のJavaScript(mootools)コードです:
$('orderNowForm').addEvent('submit', function (event) {
event.preventDefault();
allFilled = false;
$(".required").each(function (inp) {
if (inp.getValue() != '') {
allFilled = true;
}
});
if (!allFilled) {
$(".errormsg").setStyle('display', '');
return;
} else {
$('.defaultText').each(function (input) {
if (input.getValue() == input.getAttribute('title')) {
input.setAttribute('value', '');
}
});
}
this.send({
onSuccess: function () {
$('page_1_table').setStyle('display', 'none');
$('page_2_table').setStyle('display', 'none');
$('page_3_table').setStyle('display', '');
}
});
});
IEを除くすべてのブラウザーで、これは正常に機能します。しかし、IEでは、これによりエラーが発生します。 IE8を使用しているので、JavaScriptデバッガーを使用しているときに、 event
オブジェクトに preventDefault
メソッドがないためエラーが発生し、フォームが送信されていることがわかりました。このメソッドは、Firefoxの場合にサポートされています(Firebugを使用して見つけました)。
ヘルプ?
解決
IEでは、使用できます
event.returnValue = false;
同じ結果を得るには
そしてエラーが発生しないようにするには、preventDefaultの存在をテストできます:
if(event.preventDefault) event.preventDefault();
この2つを以下と組み合わせることができます。
event.preventDefault ? event.preventDefault() : (event.returnValue = false);
他のヒント
mootoolsのaddEvent関数を使用してイベントをバインドすると、イベントハンドラーはパラメーターとして渡される固定(拡張)イベントを取得します。常にpreventDefault()メソッドが含まれます。
このフィドルを試して、イベントバインディングの違いを確認してください。 http://jsfiddle.net/pFqrY/8/
// preventDefault always works
$("mootoolsbutton").addEvent('click', function(event) {
alert(typeof(event.preventDefault));
});
// preventDefault missing in IE
<button
id="htmlbutton"
onclick="alert(typeof(event.preventDefault));">
button</button>
すべての jQuery ユーザーは、必要に応じてイベントを修正できます。 HTML onclick =&quot; ..&quot;を使用したとしましょう。 preventDefault()のないIE固有のイベントを取得するには、このコードを使用して取得します。
e = $.event.fix(e);
その後、e.preventDefault();正常に動作します。
これはかなり古い投稿であることは知っていますが、IE8でこの作業を行うために少し時間を費やしました。
IE8バージョンには、ここと他のスレッドで投稿されたソリューションが役に立たなかったため、いくつかの違いがあるようです。
次のコードがあるとしましょう:
$('a').on('click', function(event) {
event.preventDefault ? event.preventDefault() : event.returnValue = false;
});
私のIE8では、 preventDefault()
メソッドはjQueryのために存在しますが、動作していない(おそらく以下の点のため)ため、これは失敗します。
returnValue
プロパティを直接falseに設定しても:
$('a').on('click', function(event) {
event.returnValue = false;
event.preventDefault();
});
jQueryカスタムイベントオブジェクトのプロパティを設定しただけなので、これも機能しません。
私にとって有効な唯一の解決策は、グローバル変数 event
のプロパティ returnValue
を次のように設定することです。
$('a').on('click', function(event) {
if (window.event) {
window.event.returnValue = false;
}
event.preventDefault();
});
IE8が動作するように説得しようとする人が簡単にできるようにします。 IE8がすぐに痛みを伴う死で恐ろしく死ぬことを願っています。
更新:
sv_in が指摘するように、 event.originalEvent
を使用してオリジナルを取得できますイベントオブジェクトを設定し、元の returnValue
プロパティを設定します。しかし、IE8ではまだテストしていません。
Mootoolsは、EventオブジェクトのpreventDefaultを再定義します。したがって、コードはすべてのブラウザーで正常に動作するはずです。そうでない場合は、mootoolsのIE8サポートに問題があります。
ie6および/またはie7でコードをテストしましたか?
ドキュメントによると
addEventで追加されたすべてのイベントは、手動でインスタンス化することなく、mootoolsメソッドを自動的に取得します。
しかし、そうでない場合は、試してみてください
new Event(event).preventDefault();
if (e.preventDefault) {
e.preventDefault();
} else {
e.returnValue = false;
}
IE 9およびChromeでテスト済み。
IE9の後にキーボードキーを無効にするには、 e.preventDefault();
IE7 / 8で通常のキーボードキーを無効にするには、 e.returnValue = false;
または return false;
キーボードショートカット( Ctrl + F
などのCtrlキーを押して)を無効にしようとする場合、これらの行を追加する必要があります:
try {
e.keyCode = 0;
}catch (e) {}
IE7 / 8のみの完全な例:
document.attachEvent("onkeydown", function () {
var e = window.event;
//Ctrl+F or F3
if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
//Prevent for Ctrl+...
try {
e.keyCode = 0;
}catch (e) {}
//prevent default (could also use e.returnValue = false;)
return false;
}
});
これは、jquery 1.3.2および2009-18-18のナイトリービルドでテストした機能です。結果をお知らせください。 OSX上のSafari、FF、Operaでは、この目的ですべてが正常に実行されます。問題のあるIE8バグを修正するためだけのもので、意図しない結果が生じる可能性があります。
function ie8SafePreventEvent(e) {
if (e.preventDefault) {
e.preventDefault()
} else {
e.stop()
};
e.returnValue = false;
e.stopPropagation();
}
使用法:
$('a').click(function (e) {
// Execute code here
ie8SafePreventEvent(e);
return false;
})
preventDefault
は広く普及している標準です。古いIEバージョンに準拠するたびにアドホックを使用するのは面倒で、ポリフィルを使用する方が良いです:
if (typeof Event.prototype.preventDefault === 'undefined') {
Event.prototype.preventDefault = function (e, callback) {
this.returnValue = false;
};
}
これにより、イベントのプロトタイプが変更され、一般的なjavascript / DOMの優れた機能であるこの関数が追加されます。これで、 e.preventDefault
を問題なく使用できます。
return false
は、すべてのブラウザーで機能するはずです。
$('orderNowForm').addEvent('submit', function () {
// your code
return false;
}
FWIW、誰かが後でこの質問に再訪した場合、onKeyPressハンドラー関数に何を渡しているかを確認することもできます。
onKeyPress(event)ではなくonKeyPress(this)を誤って渡したときに、このエラーに遭遇しました。
確認するために他に何かがあります。
機能チェック付きのメソッドに助けられました。このメソッドはIE8で動作します
if(typeof e.preventDefault == 'function'){
e.preventDefault();
} else {
e.returnValue = false;
}