menuitem 和 contextmenu 跨浏览器兼容性

Question

问题 1：我使用以下代码创建了自己的 contextmenu。

function addFullScreenMenu () {
var menu = document.createElement('menu');
var item = document.createElement('menuitem');
menu.setAttribute('id', 'fsmenu');
menu.setAttribute('type', 'context');
item.setAttribute('label', 'Fullscreen');
item.addEventListener('click', function (e) {
if (window.fullScreen) {
document.body.mozCancelFullScreen();
} else {
document.body.mozRequestFullScreen();
}
});
menu.appendChild(item);
document.body.appendChild(menu);
document.body.setAttribute('contextmenu', 'fsmenu');
}

问题：在 Firefox 中有效，但在 Google Chrome（版本 21.0.1180.81）中失败。

应进行哪些更正以使其不会在 Google Chrome 中失败？

---

问题2：使用EventListener捕获右键事件

代码：

<script type="text/javascript">
    if (document.addEventListener) {
        document.addEventListener('contextmenu', function(e) {
            alert("You've tried to open context menu"); //gets alerted in firefox and googlechrome
            e.preventDefault();
        }, false);
    } else {
        document.attachEvent('oncontextmenu', function() {
            alert("You've tried to open context menu");//gets alerted in Internet explorer
            window.event.returnValue = false;
        });
    }
</script>

问题：右键单击的 EventListener 在 Internet Explorer（版本 9）中不起作用

更新：我可以从 Phx answer 解决问题2。需要问题1的解决方案。

Answer 1

Internet Explorer（最高版本 8）使用了另一种 attachEvent 方法。

Internet Explorer 9 支持正确的addEventListener 方法。

if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }

检查此链接。 addEventListener in Internet Explorer

还有一个重要的链接：

您不应该使用 DOM 0 事件（通过 HTML 附加的事件 属性）。您应该使用事件侦听器，使用附加 W3C 浏览器中的 element.addEventListener 和中的 element.attachEvent IE。如果你正在构建一个大型网站，你应该使用 JS 框架，但这是您没有问的另一个问题。一种 框架（最流行的是 jQuery）将提供抽象 方法来做到这一点，但在没有一个的情况下，这里有一个简单的 跨浏览器的功能。

Event handler not working in Internet Explorer

这是我使用您的代码构建的 jsFiddle。它适用于 IE 9（并且代码相同）

http://jsfiddle.net/bMW4k/1/

Answer 2

您正在使用 Mozilla 特定的功能，即 .mozRequestFullScreen(); 和 .mozCancelFullScreen();。

全屏 API 尚未在许多网络浏览器中完全实现。如果你想使用它，我建议使用 polyfill。这是一个很好的：https://github.com/sindresorhus/screenfull.js/。 （它实际上是一个包装器，但它会完成这项工作。）

包含 polyfill 后，您的代码将如下所示：

function addFullScreenMenu () {
    var menu = document.createElement('menu');
    var item = document.createElement('menuitem');
    menu.setAttribute('id', 'fsmenu');
    menu.setAttribute('type', 'context');
    item.setAttribute('label', 'Fullscreen');
    item.addEventListener('click', function (e) {
        if (screenfull.enabled) {
                screenfull.toggle(this);
        }
        else {
            alert("This browser doesn't support Fullscreen API.");
        }
    });
    menu.appendChild(item);
    document.body.appendChild(menu);
    document.body.setAttribute('contextmenu', 'fsmenu');
}