CODEWITHSUNDEEP
jqueryeventsmouse
user663381
user663381

Reputation:

Detect right click's "open in new tab" on link in jQuery?

I want my links to look like legit urls, but behave differently, like go to some tracking url I define, when a click event happens. When i click link with left mouse button, i can catch it with .click() handler and change the href to something else. When i right click, it won't be caught with .click(), but i can use .mousedown() and .mouseup(), which is only a partial solution to my problem.

The thing is, i want to make sure that when some user right clicks the link, the link would still look legit, but when he chooses to open the link in a new tab, i would catch that event and change the href. In the end when the actual click event has happened on the link, the href would be changed back to the original. The url where they actually go, does something and redirects them to the real url, but it happens very fast. So the goal of this functionality is to fool the users and track their clicks. Facebook does it, but how do they handle the right clicks and "open in new tab"?

Okay, not getting anywhere without some code I guess.. Some code I have right now:

    link = $(selectorName);
    var original_link = link.attr("href");
    link.click(function(){
        link.attr("href", "/track_and_redirect");
    }).mousedown(function(event) {
        switch (event.which) {
            case 3:
                //alert('Right mouse button pressed');
                link.attr("href", "/track_and_redirect");
                break;
            default:
        }
    }).mouseleave(function(){
        link.attr("href", original_link);
    });

Currently when you right click on the link, the new url will be shown in the browser corner, how do I bypass that?

Upvotes: 5

Views: 22402

Answers (3)

Marc
Marc

Reputation: 212

$(".links").contextmenu(function(event){
    // your logic to change the href here
    $(this).attr('href', '...');
    // don't forget to attach event to recover your old link back if you need it
    attachMouseDown($(this));
});

function attachMouseDown($el){
    $el.mousedown(function(event){
        // recover your links
        $el.attr('href', '...');
        $el.unbind('mousedown'); // this is so you don't run this event when you don't need to
    });
}

I have just answered a similar question on this post

how to capture the open link in new tab event in javascript?

please check it out

Here is what I would do in your case.

  1. Attach a contextmenu event to the links (the even is triggered when the user right clicks on the link, and the browser contextmenu opens).

  2. Add your logic to change the href there. that way when they click on it, it takes to where you want.

  3. Add a mousedown or hover event on the link you changed to make sure that you correct the format latter when they hover over it. Not everyone needs this step, but you do (This totally depends on what you are trying to achieve, so figure out what even is best in your case)

  4. Once the format is corrected you can unbind the mousedown or anyother event.

Upvotes: -1

vikas
vikas

Reputation: 61

I used "contextmenu" and it helped me change all the url on right click of the mouse.

$('#help').on('click contextmenu', "a", function(event) {
  $(this).attr('href','my_new_url');
  $(this).attr('target', '_blank');
});

It also takes care of opening in new window, copy link etc.

Upvotes: 3

Louis.CLast
Louis.CLast

Reputation: 454

You can't do this, or you can make right click event for your url :)

How to distinguish between left and right mouse click with jQuery

Upvotes: 4

Related Questions