menuitem和contextmenu crossbrowser兼容性(示例代码)

栏目: 类库 · 发布时间: 2021-04-13

简介  这篇文章主要介绍了menuitem和contextmenu crossbrowser兼容性(示例代码)以及相关的经验技巧,文章约3605字,浏览量215,点赞数4,值得参考!

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

以上就是本文的全部内容,希望对大家的学习有所帮助,版权归原作者或者来源机构所有,感谢作者,如果未能解决你的问题,请参考以下文章。

同源策略和跨域资源共享(CROS)(示例代码)

[HTTP] Origins, CROS, Preflight

使用Spring Security进行auth api调用时出现Cros错误(示例代码)

使用cros实现跨域请求(示例代码)

使用CROS解决跨域问题(示例代码)