#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2013
    Posts
    1
    Rep Power
    0

    Bullet-proof Jquery implementation: Capturing click interactions without fail


    Hi, I'm new to this forum and JS coding in general (learner stage!).

    I am using Jquery to fire events when users interact with different elements (primarily click interactions). My concern (due to ignorance probably) is that Jquery can't/wont always work to capture the interaction so my goal is to make minimise that potential failure rate (and learn about when such occurances may happen).

    I've already identified a few complications:

    - element being clicked on has/doesn't have target _blank attribute so delay is necessary
    - people open link in new tab by using Ctrl+Click, right click then "Open in new tab", clicking middle buttons for mouses with custom configuration
    - element is an email address (I've had the code below end up opening the link twice)

    Assuming there are NO JS errors in the code, are there any other situations where the Jquery might not capture the click event? Any browser/device specific situations?

    See my code below for my efforts so far

    Code:
    // Clicked Social Profile
      $('.socialprofile').click(function(){
    
        if ($(this).attr('target').toLowerCase() == '_blank' || e.metaKey || e.ctrlKey || e.which == 2 || e.which == 3) {
          var newtab = true;
        }
    
        if (!newtab) {
          e.preventDefault();
          setTimeout('location.href = "' + this.href  + '"', 150);
        }
    
      });
    Many thanks for your help!
  2. #2
  3. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,176
    Rep Power
    184
    Sorry, but I probably need to debunk some of your "complications".

    - There is no delay, when you use the "target" attribute in your "a" tags. Atleast, if your function was set-up correctly. The example I will provide you (below); has no delay (that I can see; nor have I ever seen a delay, in this instance, before).
    - When you right click on a link and select "Open Link In New Tab"; people expect to be able to do that, but you could have another page (set in your email link href) open; with your contact info in it.
    - Clicking on an email address; will not open your default mail application, twice or any other page, for that matter (again.... if your function was set-up correctly).
    Code:
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <a class="socialprofile" href="mycontactinfo.html">Email Me</a>
    <a class="socialprofile" href="http://www.devshed.com" target="_blank">Visit DevShed</a>
    <script>
    $('.socialprofile').click(function(){
     if ($(this).attr("target") == "_blank") {
      return true;
     }
     else {
      document.location.href="mailto:web_loone08@devshed.com";
      return false;
     }
    });
    </script>
    You also did not define the "e" parameter in your function; you would need to do that, like so:
    Code:
    $('.socialprofile').click(function(e){
    Last edited by web_loone08; April 19th, 2013 at 08:47 AM.

IMN logo majestic logo threadwatch logo seochat tools logo