detecting user click vs. jquery .click()

Question

so I have some <a href=".. tags on a page , they have an inline onclick attribute. If the user clicks one and is not logged in , they will be prompted to log-in, then on the page refresh jquery will fire .click() on the <a> element to bring the user where they originally wanted to go.

Because of pop-up blocker issues , I made it to where if jquery triggers a .click() I open the link in the same window.

But if the user is already logged in , I would like clicking the link to open in a new tab. This is the code I have that is working fine in Chrome , but FireFox gets mad at it - says 'event is undefined'.

 <a href="#" onclick="genericActionComplete('12345', this, 'http://www.myurl.com', false, e)


function genericActionComplete(actionId, ctl, url, markComplete, e) {
    if(event.x != null){   // User Clicked - open url in new tab  
         window.open(url);
    }

    else{    // Click performed by script after logIn , open in same tab to prevent Pop-Up Blocker

     window.location = url;   
    }
}

I tried passing this and e and tried just using event with no luck in firefox , I am checking for event.x because that will have a value if the user clicked the link with the mouse.

Don't rely on JavaScript doing the Login check. ___Always___ use server code to check for it. — yunzen, Mar 22 '13 at 15:35
@HerrSerker I do already , the server displays a different tag if their not logged in that doesn't actually have the link in there , it just has code to redirect to login , and to remember the id of the link they cllicked , it is turned into this after login — Scott Selby, Mar 22 '13 at 15:38
@Shuping - its not, i saw in another SO question that the browser will just know what event is , and chrome and amazingly IE does just fine , its firefox that is having problems — Scott Selby, Mar 22 '13 at 15:40
`window.event` isn't supposed to exist in modern browsers :-). Don't rely on it! Chrome supports it merely out of convenience. — Florian Margaine, Mar 22 '13 at 15:40
@FlorianMargaine - i know , that's why this question is here , to get a better solution — Scott Selby, Mar 22 '13 at 15:40
@ScottSelby: look at the first line in your function: `event.x`, then look at the parameters that function accepts/expects: `e`, not `event` — Elias Van Ootegem, Mar 22 '13 at 15:41

score 1 · Accepted Answer · answered Mar 22 '13 at 15:41

Of course event is undefined... the last parameter passed to the function is the event, referenced by a variable e in the function definition.

function genericActionComplete(actionId, ctl, url, markComplete, e)

But passing e in the HTML as argument won't pass the event object, which is helpfully called event. Change

<a href="#" onclick="genericActionComplete('12345', this, 'http://www.myurl.com', false, e)">
<!-- ===================================================================================/\

To

<a href="#" onclick="genericActionComplete('12345', this, 'http://www.myurl.com', false, event)">
<!-- ===================================================================================/\

And you should be all right. The reason why your code was working on chrome is simple. To be as compatible and forgiving as possible, chrome does have a window.event property, like IE's of old did. Since the first line of your function is wrong:

if(event.x != null){//should be e.x

JavaScript's scope scanning resolves event to window.event - which works in IE and chrome, not in FF.
You should be all right for all major browsers there, but if you want to be on the safe side, add this line to the function, prior to checking the e.x:

e = e || window.event || {x: null};

quick & dirty solution I guess, here is why http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice — Adriano, Sep 05 '14 at 11:53

score 0 · Answer 2 · edited May 23 '17 at 12:12

What about using unobstrusive javascript ? see Difference between obtrusive and unobtrusive javascript and Why is using onClick() in HTML a bad practice?

Then you can even "dare" to do other clean things.

Not sure how you'd go about it in vanilla javascript, but below is a solution using jQuery.

see live example on jsbin http://jsbin.com/lidobarenaku/1/edit?html,js,console,output

HTML:

<a href="#" class="js-hook-for-link">your link</a>
<br><br>
<div class="programmatical-click-on-link">
If you click on this text, the link "your link" will be programmatically triggered.
</div>

Unobstrusive javascript & jQuery:

$('.js-hook-for-link').on('click', function(event, isProgrammaticalClick ){
  event.preventDefault() ; /* link behavior disabled for demo purpose */

  console.log("on click: "+(isProgrammaticalClick || "isHumanAction !" ));

  if ( isProgrammaticalClick ){ /* JS truthy/falsy value usage */
    /* .. do something on programmatical click ... */
    /* window.location = url;  open url in same tab in your case */
  }
  else {
    /* .. do something on human submission ... */
    /* window.open(url); open url in other tab in your case */
  }
});

$('.programmatical-click-on-link').on('click', function(){
  /* programmatically click on link (notice the flag param added) */
  $('.js-hook-for-link').trigger( 'click' , ['isProgrammaticalClick'] );
});

Note: I use jQuery in this example to "hook" to the class name but nothing stops you from doing that with plain javascript or another javascript selector library (ie. http://sizzlejs.com/ , https://github.com/ded/qwery and more http://jster.net/category/selector-libraries)

detecting user click vs. jquery .click()

2 Answers2