How to disable click events from contextmenu event when using Ctrl + Click in Safari for Mac?

Question

Using ctrl + click to fire the contextmenu event (Context.JS) on Safari on Mac OS 10.9 also triggers mousedown / up / click events. This makes the menu close. Events seem to occur asynchronously with respect to each other, so stopPropagation does not work, and this also seems to lead to intermittent behavior, sometimes sometimes not.

Does anyone else run into this problem, if so is you, and how did you resolve / work it?

Unfortunately, I am not able to release the code to the masses, but I hope that it will be familiar to someone there.

fiddle: http://jsfiddle.net/gnh2tuyj/

Answer 1

You can use the ctrlKey property of the MouseEvent object:

 var div = document.querySelector('div'); div.addEventListener('click', function(e) { if (e.ctrlKey) return; e.preventDefault(); alert('click!'); }, false); div.addEventListener('contextmenu', function(e) { e.preventDefault(); alert('context menu!'); }, false); 

 div { border: 1px solid red; } 

 <div>hold ctrl+click in safari, chrome, etc</div> 

So, if you want to fix context.js yourself, just add if(ctrlKey) return; l24.

 l23 $(document).on('click', 'html', function (e) { l24 if(e.ctrlKey) return; l25 $('.dropdown-context').fadeOut(options.fadeSpeed, function(){ l26 $('.dropdown-context').css({display:''}).find('.drop-left').removeClass('drop-left'); l27 }); l28 }); 

fixed script: http://pastebin.com/6ySveRty

Answer 2

Are you trying to block people copying specific sets of text or shared content?

 ID/ELEMENT/CLASS { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } 

Perhaps this is helpful. http://jsfiddle.net/gnh2tuyj/2/