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中工作，但在GoogleChrome(Version 21.0.1180.81)中失败。

应该进行哪些更正，以便在Googlechrome

中不会失败

问题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）中不起作用

更新：我可以解决问题2表格Phx的答案。需要解决问题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');
}

menuitem和contextmenu crossbrowser兼容性

2 个答案: