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

Question

When using ctrl+ click to fire a contextmenu event (Context.JS) in Safari on Mac OS 10.9, the mousedown/up/click events also fire. This causes the menu to be closed. The e

Answer 1

This solution is entirely Vue centric , but I guess anyone with some JavaScript events handling related skills should be able to apply it ... I might be doing something wrong as well ... but at least manual testing works ... Anyways at least for me it answers the question how-to implement a custom right click in Safari, by preventing the default click triggered because of the Ctrl + Click convention on mac ...

so, this is the code on the clickable element

@mouseup="handleMouseUp($event)" @mousedown="handleMouseDown($event)">

and this is the code for the vue event handlers

      , handleMouseDown: function(e){
        if (e.target && e.ctrlKey == true) {
           e.bubbles = false
           e.preventDefault();
           e.stopPropagation();
           e.target.addEventListener('click', function(e) {
             if (e.ctrlKey) {
                 e.stopPropagation();
             }
           }, false);
        }
      }
      , handleMouseUp: function(e){
        if (e.target && e.ctrlKey == true) {
           e.bubbles = false
           e.preventDefault();
           e.stopPropagation();
           e.target.addEventListener('click', function(e) {
             if (e.ctrlKey) {
                 e.stopPropagation();
             }
           }, false);
        }
      }

To actually see it in action : https://qto.fi/qto/logon ( just click on logon with default user ) https://qto.fi/qto/view/features_doc

Answer 2

You could make use of the ctrlKey property of the MouseEvent :

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 patch the 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    });

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

Answer 3

Are you trying to block against people copying specific sets of text or general 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;
}

maybe this is of use. http://jsfiddle.net/gnh2tuyj/2/