Selecting anywhere in a <li> and pressing the link within it

I have 开发者_Python百科a div with few <li>'s in.

Is it possbile with javascript that when ever you click anywhere within the <li>\list it actually clicks the link which in the list?

Here is a fiddle what i mean of a working example: http://jsfiddle.net/3eLfM/

Thank you

#div1 a {
    display: block;
    /* Other styles */
}

Easiest to accomplish via CSS, just make the A elements take up the entire inner space of the LI:

#div1 a {
 display: block;
}

check out jQuery's .click() event

for example:

$('.li').click(function(event){ ...navigate to link here });

Using pure, unobtrusive Javascript:

window.onload = function() {
    var listItems = document.getElementById("div1").getElementsByTagName("li");
    var numItems = listItems.length;
    for (var i = 0; i < numItems; i++) {
        listItems[i].onclick = clickLink;
    }
};

function clickLink() {
    var links = this.getElementsByTagName("a");
    if (links[0]) {
        window.location = links[0].href;
    }
}

See it in action

Why not just make the entire body of the <li> be the link?

If you really need to do this, sure, you could write a Javascript function that accepts a node as a parameter, scans the node for a link tag, and then redirects to that link. Then you could put an onclick parameter on the li tag that calls this function. But why? If you want the entire body of the li to be a link, then make the entire body of the li a link. If you don't like the way links are displayed, use CSS to change the appearance. I'd always opt for doing things the easy way before I look for a hard way to do the same thing. How can I travel 100 miles in less than two hours without using a car or airplane? I don't know, I'm sure there's a way, but my first response would be, Why can't I use a car or airplane?