How to avoid click event for child elemnets in bootstrap dropdown

Question

I am using bootstrap dropdown in my project.

<ul class="dropdown-menu">
            <li class="favProperties dropdown-submenu pull-left"><a href="#">Property</a>
<ul>
<li> property 1 </li>
<li> property 2 </li>
<li> property 3 </li>
</ul>
</li>
        </ul>

I have onclick event on "li" tag having class "favProperties".

$(".favProperties").on("click", function (e) {
alert("clicked");
});

This work fine when I click on parent Li tag. But this click event is also fired when I click on child Li tags.

How can I avoid these click events.

Answer 1

$(".dropdown-menu li.favProperties").on("click", function (e) {
    e.preventdefault()
});

The event.preventDefault() method stops the default action of an element from happening.The event parameter comes from the event binding function. The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.