私はイベントを作成しているので、DOM Eventコンストラクターを使用します。
new Event('change');
これは最新のブラウザでは問題なく機能しますが、Internet Explorer 9、10、11では次のエラーで失敗します。
Object doesn't support this action
Internet Explorerを修正するにはどうすればよいですか(理想的にはポリフィルを使用)。できない場合、使用できる回避策はありますか?
私はイベントを作成しているので、DOM Eventコンストラクターを使用します。
new Event('change');
これは最新のブラウザでは問題なく機能しますが、Internet Explorer 9、10、11では次のエラーで失敗します。
Object doesn't support this action
Internet Explorerを修正するにはどうすればよいですか(理想的にはポリフィルを使用)。できない場合、使用できる回避策はありますか?
回答:
MDNには、CustomEventコンストラクター用のIEポリフィルがあります。IEにCustomEventを追加し、代わりにそれを使用すると機能します。
(function () {
if ( typeof window.CustomEvent === "function" ) return false; //If not IE
function CustomEvent ( event, params ) {
params = params || { bubbles: false, cancelable: false, detail: undefined };
var evt = document.createEvent( 'CustomEvent' );
evt.initCustomEvent( event, params.bubbles, params.cancelable, params.detail );
return evt;
}
CustomEvent.prototype = window.Event.prototype;
window.CustomEvent = CustomEvent;
})();
window.Event= CustomEvent
の最後の行に。
StorageEvent
し、typeof(StorageEvent)
MSエッジでは動作しません。これは機能しますtry { new StorageEvent(); } catch (e) { /* polyfill */ }
。
私はあなたの問題を解決し、クロスブラウザーのイベント作成に対処するための最良の解決策は次のとおりだと思います:
function createNewEvent(eventName) {
var event;
if (typeof(Event) === 'function') {
event = new Event(eventName);
} else {
event = document.createEvent('Event');
event.initEvent(eventName, true, true);
}
return event;
}
return event
それをに渡すことができるようにすべきだと思いますdispatchEvent()
。
CustomEvent
detail
オプションを介してカスタムデータを渡すことができますが、渡しEvent
ません。私が間違っている?
このパッケージは魔法を行います:
https://www.npmjs.com/package/custom-event-polyfill
パッケージを含めて、次のようにイベントをディスパッチします。
window.dispatchEvent(new window.CustomEvent('some-event'))
HTMLトグルイベントなどの単純なイベントをディスパッチしようとしているだけの場合、これはInternet Explorer 11と他のブラウザーで機能します。
let toggle_event = null;
try {
toggle_event = new Event("toggle");
}
catch (error) {
toggle_event = document.createEvent("Event");
let doesnt_bubble = false;
let isnt_cancelable = false;
toggle_event.initEvent("toggle", doesnt_bubble, isnt_cancelable);
}
// disclosure_control is a details element.
disclosure_control.dispatchEvent(toggle_event);
es6
let
(そしてを使用していないvar
)
IE 9
以上を求めている場合、そしておそらくこのスレッドを見つけた回答を求めている人が、レガシーバンキングシステム用のアプリや、コンピューターを制御できず、古いIEを使用する義務があります。これは...マイクロソフトのサポートとは何の関係もありません
これと他のものをあなたのためにパッチすることができるポリフィルサービスがあります
https://polyfill.io/v3/url-builder/
<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js"></script>
custom-event
NPMパッケージには、私のために働い美しく
https://www.npmjs.com/package/custom-event
var CustomEvent = require('custom-event');
// add an appropriate event listener
target.addEventListener('cat', function(e) { process(e.detail) });
// create and dispatch the event
var event = new CustomEvent('cat', {
detail: {
hazcheeseburger: true
}
});
target.dispatchEvent(event);
私は個人的にラッパー関数を使用して、手動で作成されたイベントを処理します。次のコードは、すべてのEvent
インターフェースに静的メソッドを追加し(末尾がすべてのグローバル変数Event
はEventインターフェースです)、element.dispatchEvent(MouseEvent.create('click'));
IE9 +のような関数を呼び出すことができるようにします。
(function eventCreatorWrapper(eventClassNames){
eventClassNames.forEach(function(eventClassName){
window[eventClassName].createEvent = function(type,bubbles,cancelable){
var evt
try{
evt = new window[eventClassName](type,{
bubbles: bubbles,
cancelable: cancelable
});
} catch (e){
evt = document.createEvent(eventClassName);
evt.initEvent(type,bubbles,cancelable);
} finally {
return evt;
}
}
});
}(function(root){
return Object.getOwnPropertyNames(root).filter(function(propertyName){
return /Event$/.test(propertyName)
});
}(window)));
編集:すべてのEvent
インターフェイスを検索する関数を配列に置き換えて、必要なイベントインターフェイスのみを変更することもできます(['Event', 'MouseEvent', 'KeyboardEvent', 'UIEvent' /*, etc... */]
)。