Reactコンポーネントに、「Enter」キーを無効にするこのコードがあります。
export const attachDisableEnterEvent = (ref) => {
const node = ReactDOM.findDOMNode(ref);
// Evergreen event listener || IE8 event listener
const addEvent = node.addEventListener || node.attachEvent;
addEvent('keypress', _disableEnter, false);
}
Chrome / Firefoxでは正常に動作しますが、Safariでは動作しません。Safariで私は得る：-
TypeError：NodeのインスタンスでのみNode.addEventListenerを呼び出すことができます
私はこれを行うことによってのみ（すべての面で）それを機能させることができました：-
addEvent.call(node, 'keypress', _disableEnter, false);
addEventListenerChromeとSafariでの実装が異なるのはなぜか疑問に思っています。ように思えるNode.addEventListenerChromeでだけで直感的に結合するthisことを定義したノードのインスタンスに。
それはおそらく私たちが以下を持っているのと同じ理由です：
var log = console.log;
log('foo') // TypeError
代わりに、次のことを行う必要があります。
var log = console.log.bind(console); // bind console.log function to it's proper context
log('foo') // 'foo'
あなたの場合、
addEvent('keypress', _disableEnter, false);
コンテキストを（暗黙的に）ウィンドウオブジェクトにします。
一般に、他の誰かに関数を渡す場合は、常に最初に関数を所有オブジェクトにバインドする必要があります。ブラウザの実装はブラウザごとに異なるため、それが均一に機能することを保証するための最良の方法です。
コンソールの場合、.logはコンソールオブジェクト自体の他のインスタンスメソッドを参照していると思います。そのため、Safariでは、node.addEventListener関数はでのみ定義された他の関数を必要とする方法で実装される可能性がnodeあり、おそらくより説明的なエラーメッセージもスローされます。
したがって、代わりに次のことを行う必要があります。
const addEvent = node.addEventListener || node.attachEvent;
const boundAddEvent = addEvent.bind(node);
// use boundAddEvent however you like anywhere, or .call like you did
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加