菜单和上下文菜单交叉浏览器兼容性 [英] menuitem and contextmenu crossbrowser compatability

问题描述

问题1：我使用下面的代码创建了自己的上下文菜单。

Problem 1: I had made my own contextmenu using the following piece of code.

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（版本21.0.1180.81）。

Issue: Works in firefox but fails in GoogleChrome(Version 21.0.1180.81).

应进行哪些更正在中无法失败 c>

What corrections should be done so that it does not fail in Googlechrome

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

Problem 2: Capturing right click event using 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>

问题：用于右键单击在Internet Explorer中无法使用的EventListener（第9版）

Issue: EventListener for right click not working in Internet Explorer(Version 9)

更新：我可以解决问题2形式Phx答案。

Update: I can solve problem2 form Phx answer . Need solution for problem1.

推荐答案

您使用的是Mozilla特有的函数，即 .mozRequestFullScreen 和 .mozCancelFullScreen（）; 。

You are using Mozilla-specific functions, namely .mozRequestFullScreen(); and .mozCancelFullScreen();.

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

The fullscreen API isn't fully implemented yet in many web browsers. If you want to use it, I recommend using a polyfill. Here's a good one: https://github.com/sindresorhus/screenfull.js/. (It's actually a wrapper, but it will do the job.)

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

With the polyfill included, your code would look like:

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');
}

这篇关于菜单和上下文菜单交叉浏览器兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！