1

So, I have a div which when it is left-clicked, it brings up a popup.

However, I want to have a link to the div, so when users right-click then there is an option for "href" and can click "Open link in new tab".

Here is what I mean:

 <div class="show_popup">
    Shows popup for `example.com/hi`
 </div>

So, is there a way to add "href" which does not do any "left-click" functions (ie. does not redirect the user to another page), but when the user right clicks on it, there is an option to "open link in new tab".

I hope it makes sense.

Thanks!

Steve Kim
  • 5,293
  • 16
  • 54
  • 99
  • 1
    This might be helpful: [How to distinguish between left and right mouse click with jQuery](http://stackoverflow.com/questions/1206203/how-to-distinguish-between-left-and-right-mouse-click-with-jquery) – showdev Oct 16 '15 at 19:20

1 Answers1

1

Interesting question. I wondered if this was possible too and came up with the following:

Notice: the code will probably not work on Stackoverflow or any other service that can host code due to it running in a sandboxed environment. If you open your console you might see warnings which tell you it has blocked pop-ups. To access your console:

Chrome

Ctrl / Command+Shift / Option+J

Firefox

Ctrl / Command+Shift / Option+K 

$(function() {

  $('.my-element').on('click contextmenu', function(e) {

    // If the right mouse button is used 
    if (e.which === 3) {

      // Grab data-link value from <div> 
      var link = $(this).data('link');
      // Open new tab
      window.open(link, '_blank');

    }

    // Cancel default right click behavior
    return false;

  });

});

.my-element {
  width: 200px;
  height: 200px;
  color: white;
  background: tomato;
  font: bold 1em sans-serif;
  text-align: center;
  line-height: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-element" data-link="https://www.google.com">Right click here</div>
Jason
  • 4,905
  • 1
  • 30
  • 38