如何将以下事件侦听器转换为特定于供应商的侦听器？

Question

如果用户在横向时退出全屏，我正在使用以下函数触发事件：

document.addEventListener('webkitfullscreenchange', () => {
  if (util.isLandscape()) {
    console.log('EXITED')
  }
}, false)

我想加mozfullscreenchange和MS等...

如何构建一个函数来实现这一点？

Answer 1

简单（和幼稚）的方法可能是：

document.addEventListener('mozfullscreenchange', fullScreenFunction, false)
document.addEventListener('webkitfullscreenchange',fullScreenFunction, false)
document.addEventListener('msfullscreenchange', fullScreenFunction, false)
//etc
function fullScreenFunction()
{
 if (util.isLandscape()) {
        console.log('EXITED')
      }    
}

或者您可以尝试测试存在哪个前缀，然后只将一个事件句柄绑定到哪个事件句柄。

粗略的想法是这样的：

var prefixes = ['webkit', 'moz', 'ms', 'o'];
var prefixToUse = '';
for (var i = 0; i < prefixes.length; i++) {
//This checks against the document object for that event.
//It will start with on eg onmsfullscreenchange or onwebkitfullscreenchange
    if( 'on' + prefixes[i] + 'fullscreenchange' in document) {
        prefixToUse = prefixes[i];
        break;
    } 
}
document.addEventListener(prefixToUse + 'fullscreenchange', fullScreenFunction, false);

function fullScreenFunction()
{
    if (util.isLandscape()) {
        console.log('EXITED')
    }
}