How do I make the entire div clickable using plain javascript?

Question

I don't need to write this in jQuery but I'm not versed enough in plain javascript to figure it out. Chris Coyier wrote a nice explanation of what I'm talking about here.

The reason I want to convert it is because I don't need to include an entire jQuery library for this one piece of code. I can save that extra request by using plain old javascript.

This is the example code that I want to convert:

$(document).ready(function() {
    $(".featured").click(function(){
        window.location=$(this).find("a").attr("href"); return false;
    });
});

Here's what I've come up with so far:

document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll("div.feature").click(function(){
        window.location=$(this).find("a").setAttribute("href"); 
        return false;
    });
});

One thing which isn't correct in this, as far as I know, are the querySelectorAll, which is looking for just a div element, right? The other thing is the $(this), which I don't know how to translate into plain javascript.

Joseph · Accepted Answer · 2012-05-22 06:21:28Z

4

Assuming...

you know the browser support for querySelectorAll and yet you still use it
that addEventListener only works for standards compliant browsers

I believe you meant:

//get all a's inside divs that have class "featured"
var feat = document.querySelectorAll("div.featured a"),
    featlen = feat.length,
    i;

//loop through each
for(i=0;i<featlen;++i){
    //add listeners to each
    feat[i].addEventListener('click',function(){
        window.location = this.href;
    },false);
}

Or you can have the <div> wrapped in <a>. No JS required. It's perfectly valid HTML and browsers do work as intended despite the rule that inline elements should not contain block elements. Just make sure to have display:block on <a> as well as adjust its size.

<a href="location">
    <div> content </div>
</a>

edited May 22, 2012 at 6:21

answered May 22, 2012 at 6:08

Joseph

120k31 gold badges186 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

micah Over a year ago

Oh no, querySelectorAll isn't supported by IE7. Darn. Is there a way around that problem? I also find it interesting that it's not as easy as translating the original jQuery into javascript as it is written.

scessor · Accepted Answer · 2012-05-22 07:03:58Z

2

You can select with this.querySelectorAll(...):

IE8:

window.onload = function() {
    // get all dom elements with class "feature"
    var aFeatures = document.querySelectorAll(".feature");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].onclick = function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        };
    }
};

IE9 and other current browser:

document.addEventListener("DOMContentLoaded", function() {
    // get all dom elements with class "feature"
    var aFeatures = document.querySelectorAll(".feature");
    // for each selected element
    for (var i = 0; i < aFeatures.length; i++) {
        // add click handler
        aFeatures[i].addEventListener('click', function() {
            // get href of first anchor in element and change location
            window.location = this.querySelectorAll("a")[0].href;
            return false;
        });
    }
});

=== UPDATE ===

For IE7 support you should add following (untested) script before (also see here):

(function(d){d=document,a=d.styleSheets[0]||d.createStyleSheet();d.querySelectorAll=function(e){a.addRule(e,'f:b');for(var l=d.all,b=0,c=[],f=l.length;b<f;b++)l[b].currentStyle.f&&c.push(l[b]);a.removeRule(0);return c}})()

It is possible that it only supports document.querySelectorAll not element.querySelectorAll.

edited May 22, 2012 at 7:03

answered May 22, 2012 at 6:18

scessor

16.1k4 gold badges45 silver badges55 bronze badges

2 Comments

micah Over a year ago

Is there a way to add IE7 support using javascript alone? Otherwise, I'll have to see if I can get the client live with IE7 functioning differently.

micah Over a year ago

btw, I tested it and the IE8 version works for all browsers too. But it's great that you included both methods considering some people will drop support for IE8 in the future.

Collectives™ on Stack Overflow

How do I make the entire div clickable using plain javascript?

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related