menuitem和contextmenu crossbrowser兼容性 [英] menuitem and contextmenu crossbrowser compatibility

问题描述

问题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（版本21.0.1180.81）中失败。

应该做些什么修正，在 Googlechrome

---

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

代码：

 < script type =text / javascript> 
 if（document.addEventListener）{
 document.addEventListener（'contextmenu'，function（e）{
 alert（您试图打开上下文菜单）; //获取提醒在firefox和googlechrome 
 e.preventDefault（）; 
}，false）; 
} else {
 document.attachEvent（'oncontextmenu'，function（）{
 alert（您试图打开上下文菜单）; //在Internet Explorer中获取警报
 window.event.returnValue = false; 
}）; 
} 
< / script> 
  

问题：EventListener for right click not working in Internet Explorer（Version 9）

更新：我可以解决problem2表单Phx答案。需要针对problem1的解决方案。

和 .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（此浏览器不支持Fullscreen API。）; 
} 
}）; 
 menu.appendChild（item）; 
 document.body.appendChild（menu）; 
 document.body.setAttribute（'contextmenu'，'fsmenu'）; 
} 
  

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

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

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

---

Problem 2: Capturing right click event using EventListener

Code:

<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>

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

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

解决方案

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

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.)

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

这篇关于menuitem和contextmenu crossbrowser兼容性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！