Fire click event on div before a

Hello,

Is it possible to fire a click event on a div before it fires on an a or li element? Currently I am manually building a dropdown list. So I have a list of li element and I have a div on top of that (a dropdown button). Now I have set with jquery click events on the a and the div item. But if I click the div, it first fires the click on the a item (li). No matter in what order I place them. Any idea how to fire the onclick on the div before the li (a)? Or maybe see if the click is within the div so I can skip the li (a) click and wait for propagation?

<div class="mobile-page-nav" id="titleNavBar" style="height: 30px;">
    <div class="dropdownright">
        <i class="fa fa-caret-down fa-2x" aria-hidden="true"></i>
    </div>  
    <ul class="mobile-menu-ul" id="#mobile-menu">
        <li class="selected">
            <a href="#Item1" index_value="0">
                Item1
            </a>
        </li>                               
        <li>
            <a href="#Item2" index_value="1">
                Item2
            </a>
        </li>
    </ul>
<div>

$('.mobile-menu-ul li').click(function(e){
    alert('li (a) clicked first?? :(');
});
$('.dropdownright').click(function(e){
    alert('dropdown click first! :D');
});

lyleyboy

8 years ago

Level 16

Have a read about event bubbling. This is basically because your mouse is effectively over multiple elements in the DOM ALL the events fire.

You're best bet, since you're using jQuery would possibly be to catch the click on the item you don't want to be clicked and preventDefault() on it.

Then when/if you want to you can trigger the click event using this

$("a").trigger("click");

Untested but it should work.

2 likes

cre3z

8 years ago

Best Answer

Level 2

Is this dropdown for mobile? if so you are going to have that problem, either way there are three ways of handling this:

One: Use the jQuery preventDefault() method like so:

$('.mobile-menu-ul li').click(function(e){

    e.preventDefault();
    //bind any alternative events after this
        
});

Two: Leave your a empty, and only bind an href="" attribute after you have clicked on the div. I would not recommend this as it is unnecessary but it might help as we don't really know the structure of this dropdown:

$('.mobile-menu-ul li').click(function(e){

    e.preventDefault();
    //bind href here
    $('a').attr('href', 'your_url');
    //trigger a click on your a if you need it 
    $("a").trigger("click");
        
});

Three: only if you are using an icon (such as an arrow or plus sign that show expansion) you could display the a and your icon inline and bind the click event to your icon. The result would be that your nav would expanded only on click of the icon and clicking on the a would trigger the link.

1 like

JacDev

8 years ago

Level 1

Thanks for the replies. Yes it is for mobile only. The problem with the PreventDefault is that I only need to prevent it if it got clicked on the div (overlay), anywhere else it should still do the Default. The problem is that I cannot detect in the mobile-menu-ul li if the click was within the div. So I think that is not an option.

The second option is not possible I guess, since the links (a href) are anchor links and can be all differt on a per li base. So no default. Maybe if I add a custom attribute to the a, but that also seems difficult.

Option 3 seems most logical. Hope I didn't had to do that, but I probably have to add an 'a' item to the 'i' and thus catch the first event there.

But thanks

Please or to participate in this conversation.