menuitem和contextmenu crossbrowser兼容性

Posted 2021-04-13

问题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的方法。

答案

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和IE中的element.attachEvent附加。如果您正在构建一个大型网站，那么您应该使用JS框架，但这是一个您没有问过的不同问题。一个框架（最流行的是jQuery）将提供抽象方法来执行此操作，但在没有一个框架的情况下，这是一个跨浏览器的简单功能。

Event handler not working in Internet Explorer

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

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

另一答案

您正在使用特定于Mozilla的函数，即.mozRequestFullScreen();和.mozCancelFullScreen();。

在许多Web浏览器中尚未完全实现全屏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');
}