Right click continues to spread in Firefox

Question

I just noticed something unusual. This is what I want to accomplish:

• I want the div to show when I click the link

• I want the div to disappear when I clicked elsewhere in the document

• I do not want it to disappear when I click on the div itself

Something like that:

http://jsfiddle.net/XPmyF/

JS:

(function() { var box = $('#box'); $(document).on('click', function() { if (box.css('display') == 'block') { box.css('display', 'none'); } }); $('#start').on('click', function(e) { box.css({ 'text': 'Box', 'position': 'absolute', 'top': '50px', 'left': '0', 'background': '#EEE', 'border': '1px solid #555', 'width': '200px', 'height': '50px', 'display': 'block' }); e.stopPropagation(); }); box.on('click', function(e) { e.stopPropagation(); }); })();​ 

This fiddle works fine, but when I tested it in Firefox (15.0.1), if you right-click on the div, it will disappear, and this is not the behavior I'm looking for. StopPropagation () seems to work for clicks but not right clicks in Firefox. Chrome saves right-clicks in a document.

How can i fix this?

thanks

Answer 1

Use the event.which method to determine which button was clicked. Here is an example in jsfiddle .

 $(document).on('click', function(event) { if (event.which == 1 && box.css('display') == 'block') { box.css('display', 'none'); } }); 

Answer 2

Edited for actual work ...

Sorry, the events did not work as expected. You can deal with it with the mouse.

 (function() { var box = $('#box'); var clicky = true; $(document).on('click', function() { if (box.css('display') == 'block' && clicky) { box.css('display', 'none'); } }); $('#start').on('click', function(e) { box.css({ 'text': 'Box', 'position': 'absolute', 'top': '50px', 'left': '0', 'background': '#EEE', 'border': '1px solid #555', 'width': '200px', 'height': '50px', 'display': 'block' }); e.stopPropagation(); }); box.mouseenter(function(e) { clicky = false; }); box.mouseout(function(e) { clicky = true; }); })();