Menuitem and contextmenu crossbrowser compatibility

Question

Problem 1: I made my own contextmenu using the following code snippet.

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

Problem: It works in firefox , but does not work in GoogleChrome(Version 21.0.1180.81) .

What corrections must be made so that it does not fail in Googlechrome

---

Problem 2: Capturing a right-click event with an EventListener

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

Problem: EventListener for right-clicking does not work in Internet Explorer (version 9)

Update . I can solve the phx problem with phx. A solution to the problem is required.

Answer 1

Internet Explorer ( prior to version 8 ) used the alternative attachEvent method.

Internet Explorer 9 supports the correct addEventListener method.

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

Check out this link. addEventListener in Internet Explorer

And another important link:

You should not use DOM 0 events (events attached via HTML attributes). You should use event listeners using element.addEventListener in W3C browsers and element.attachEvent in IE. If you are building a large website, you should use JS but this is another question that you did not ask. The framework (the most popular of them is jQuery) will provide abstract methods for this, but in the absence of one here is just to make it a cross browser.

Event handler not working in Internet Explorer

This is the jsFiddle I created with your code. It works with IE 9 (and has the same code)

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

Answer 2

You use functions specific to Mozilla, namely .mozRequestFullScreen(); and .mozCancelFullScreen(); .

The full-screen API is not yet fully implemented in many web browsers. If you want to use it, I recommend using polyfill. Good here: https://github.com/sindresorhus/screenfull.js/ . (This is actually a wrapper, but it will do the job.)

With polyfill turned on, your code will look like this:

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