menuitem and contextmenu crossbrowser compatibilit

Question

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.

Answer 1

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

Answer 2

Internet Explorer (up to version 8) used an alternate attachEvent method.

Internet Explorer 9 supports the proper addEventListener method.

if (elem.attachEvent) { // IE DOM
      elem.attachEvent("on"+evnt, func);
   }

Check this link. addEventListener in Internet Explorer

And another important link:

You shouldn't be using DOM 0 events (events attached via HTML attributes). You should use event listeners, attached using element.addEventListener in W3C browsers and element.attachEvent in IE. If you're building a large website, you should be using a JS framework, but that's a different question that you didn't ask. A framework (the most popular being jQuery) would provide abstract methods to do this, but in the absence of one, here's a simple function to do it cross-browser.

Event handler not working in Internet Explorer

This is a jsFiddle that i have build with your code. It's works with IE 9 (and it's the same code)

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