1

I'm trying to find a creative solution to this one. I know there are alot of scripts out there, many from stackoverflow itself, that can do a 'scan' of the web page through a body onload- but this isn't quite what I'm seeking.

I'm looking for a single script that can be included on the header of the page (via include, so its included on all pages) that detects whether the href the user clicked is external or local, and if it is local it would display a message.

I have a solution already which requires me to include an onClick handler on each href. The problem is this particular site literally has hundreds of hrefs.. I'm looking for a very clean solution that will save me time.

I have a few scripts I'm playing with, I'm just wondering if anyone is familiar with such a way that could easily do this.

I'd prefer Javascript and not Jquery.

Michael Watson
  • 89
  • 1
  • 4
  • 13

2 Answers2

2

Rather than attaching individual event handlers, you should rely on the bubbling mechanism using a delegate

var body = document.getElementsByTagName('body')[0];

body.addEventListener('click', function(e){ 
    if(e.target.nodeName === "A"){
        var href = e.target.getAttribute('href'),
            selfhost = window.location.hostname;
        if(href.indexOf(selfhost) !== -1){
            // display message here
        }
    }
}, false);
Rob M.
  • 35,491
  • 6
  • 51
  • 50
  • What would be the trigger for this script to execute? – Michael Watson Mar 07 '13 at 22:39
  • Presumably you would put that exact code in a script file and include it in the head of the file as you mentioned. You would need to wrap it in window.onload so that it wasn't trying to access DOM elements before they were available. When a user clicks something and the event bubbles up to the body tag, the handler is executed checking if it is a link, if it is a link it checks if the hostname differs from the link and executes the inner most portion `//display message here` – Rob M. Mar 07 '13 at 22:43
  • I'm having problems getting your method to work. I've defined the script you provided in the header and at the end I did a window.onload to call it.. But nothing is happening =( I'm doing something wrong I imagine? – Michael Watson Mar 08 '13 at 15:52
  • -nods- it works on JSfiddle just fine, but nowhere on my site. – Michael Watson Mar 08 '13 at 16:32
  • The error I get is: Uncaught TypeError: Cannot call method 'addEventListener' of null – Michael Watson Mar 08 '13 at 16:45
  • I have included the desired id to be targeted in both the code and the HTML. In your HTML\JS this would be 'links'. – Michael Watson Mar 08 '13 at 16:49
  • Without more specific info this is the best I got, if you want to send me your HTML I can provide a more concrete example. – Rob M. Mar 08 '13 at 19:49
0

Use $.on() http://api.jquery.com/on/ and bind it to your document. So you only need to attach 1 handler to handle ALL your thousands of links. Eg.

var onClickLink = function(e) {
    // handle event here
};
$(document).on('click', 'a', onClickLink);
Amy
  • 7,388
  • 2
  • 20
  • 31
  • If you wanted a pure JavaScript version, then the idea is to attach the `click` event to the document. And when the event fires, you have to get the actual element `e.target` instead of `e.currentTarget` [Read more about e.target vs e.currentTarget](http://stackoverflow.com/questions/5921413/difference-between-e-target-and-e-currenttarget). But jQuery makes this so easy, why resist? :) – Amy Mar 07 '13 at 22:32