4

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?

  • 1
    Are you saying that the actual link you want to send them to is not 'legit' then? – musefan Apr 11 '13 at 08:59
  • 1
    *"I want my links to look like legit urls, but behave differently, like go to some tracking url I define"* Don't. Just don't. Do what Google does on the search results page: Make the link take you to a tracking page that redirects to the target. (And even what they do is a bit evil, because when you hover the link, what you see in the status bar isn't the real link you're going to, they override the status text.) – T.J. Crowder Apr 11 '13 at 09:00
  • Why the down votes? Is something unclear? No research effort? No need to take this emotionally. @musefan: They will be directed to the tracking urls, but the link itself needs to look like it's going straight to the target url. –  Apr 11 '13 at 10:04
  • Actually i checked Google, if you search for something and hover on the link, you see the target url, try right click on it and don't do anything, hover the link again and the url is changed. So they don't change it back to original, after the right click has happened. That's what i have right now, but it's not the ideal solution. –  Apr 11 '13 at 10:17
  • 3
    @IndrekR: FWIW, I agree with you about the downvotes. Downvoting isn't for disagreeing with someone's intent. But people are people. :-) – T.J. Crowder Apr 11 '13 at 11:33

3 Answers3

4

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

Community
  • 1
  • 1
Louis.CLast
  • 424
  • 1
  • 3
  • 15
3

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.

cjhveal
  • 5,668
  • 2
  • 28
  • 38
vikas
  • 61
  • 6
-1
$(".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.

Marc
  • 212
  • 1
  • 3
  • 8
  • Please don't post link-only answers to other Stack Exchange questions. Instead, include the essential portions of the answer here, and *tailor the answer to this specific question.* – Machavity Jun 05 '18 at 22:10