Question

I have a situation where I have a navigation menu that’s a series of <ul> lists, the first <li> of which is a tab. I want to make the entire <li> clickable instead of the <a> tag inside the tab. So for example:

<ul id="home">
    <li id="navtab">
        <a id="home-link" onclick="doHome();">HOME</a>
    </li>
</ul>

And the anchors are being created dynamically, so I need to keep this structure. So I’m trying to suss out how to capture the click event at the <li> level, fire the onlick on the <a> tag WITHOUT then re-firing the click at the <li> level and causing recursion.

I’m using jQuery, but that’s not necessary in the answer, or even relevant.

I’ve already tried adding e.stopPropagation() and preventDefault without positive result.

Answer 1

Instead of using Javascript, why don’t utilize CSS and make the <a> a block-level element so that it fills up the entire space of the list item?

#home li a {
  border:solid 1px #000;
  display:block;
}

This should essentially make the entire <li> clickable. However, if you have specific height or padding values applied to the li with CSS, you should move those rules down to this selector for the a.