Link with a non-clickable background image

Question

I have a menu that is formatted as an unordered list where the links (instead of the list items) have a background images that look like bullets. Due to the complexity of the CSS, I am not able to change this - the background images have to "belong" to the links, not to the list items.

My issue is that I would like to be able to have the links direct me to their respective pages, while also having the background images work to expand subcategories. This means that I need to somehow "separate" the background image from the link in order to reference it separately in my jQuery animation.

I would like to be able to do something like this:

$( document ).ready(function() {
    $("#mainnav ul li").on("click", function(e) {
        var $t = $(e.target);
        if (!$t.is("a")) {
            $(this).children("ul").slideToggle("slow", "linear");
            return false;
        }
    });
});

because right now I am just using this and it doesn't work when I actually want to click on the links:

$("#mainnav ul li").click(function () {
    $(this).children("ul").slideToggle();
    return false;
});

I've attached a demo (though keep in mind that this not my actual code, it is just an example of how I would like this to work): http://jsfiddle.net/stamblerre/GzD3M/11/

I would like to be able to click on JUST the pencils to expand the subcategories so that I can use the text to click on the link and be directed to another page. Does anyone have any ideas on how to do this without associating the background-image with the list items rather than the links?

Thank you!!

---

With the help of many of the people on this thread, I've figured out my issue, here's the solution: http://jsfiddle.net/stamblerre/GzD3M/19/

Answer 1

You can check the clicked point to see if it's in the icon's region, actually we can just check the horizontal coordinates. We know that you set padding-left:15px for the a element, which means the icon's width is about 15px. If the clicked point is in the icon's region, we will let the click event propagate, otherwise stop it from propagating.

$('#mainnav ul li > a').click(function(e){
    if(e.pageX - $(e.target).offset().left >= 15) {
        e.preventDefault();
        e.stopPropagation();            
    }
});

Demo.

Answer 2

You can send your background-image into a pseudo element and use pointer-events so it doesn't catch the click.

DEMO

#mainnav a {
    margin-left: 20px;
    background-repeat: no-repeat;
}
#mainnav a:before {
    content: url(http://shapeshed.com/images/articles/pencil_icon.gif);
    margin-left: -20px;
    margin-right:5px;
    pointer-events:none;/* this is where it happens if browser understands it */
    vertical-align:middle;
}
#mainnav ul {
    list-style-type: none;
}
#mainnav ul ul {
    display: none;
}

Answer 3

just add next to the link another link with the pencil image inside with a unique class that will open the nested ul, something like this:

<ul>
    <li>
        <a href="#" class="pencil"><img src="pencil.jpg"></a> <a href="any url">Click me</a>
        <ul style="display:none" class="nested_ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </li>
</ul>  

jquery:

$(document).ready(function() {
    $('.pencil').click(function(e) {
        e.preventDefault();
        $(this).parent().children(".nested_ul").slideToggle("slow", "linear");
    });
 });

it's 100% working!...good luck.