Prevent click on outer li while clicking on inner link

Question

I have some lis including a links as below

<li>
  <span>SomeText</span>
  <a href='someurl' class='entityDetailModal'>sometext</a>
</li>

I am using a third party library ('LightGallery') that adds click event on Li, and by Jquery I have add click event to the links to show a dialog. The problem is when I click on link both click event will be fired,

my click event handler is

$('body').on("click", 'a.entityDetailModal', function (event) { 
    event.preventDefault(); 
    event.stopPropagation();
    loadDialog(this, event, '#mainContainer', true, true, false); 
    return false; 
});

I tried event.stopPropagation() and event.preventDefault(); and return false; in link onclick event handler but they don't work.

Sample:http://jsfiddle.net/HuKab/30/

How can I overcome this?

Update

It seems the problem is the way I add click event handler, using this way it seems that everything is ok

$('a.entityDetailModal').click(function (event) { 
    event.preventDefault(); 
    event.stopPropagation();
    loadDialog(this, event, '#mainContainer', true, true, false); 
    return false; 
});

Update 2

Thanks @Huangism, this post stackoverflow.com/questions/16492254/pros-and-cons-of-using-e-stoppropagation-to-prevent-event-bubbling is explaining the reason.

Can you recreate a simple version of this in a fiddle? stopPropagation() should be able to fix this — Huangism, Jul 11 '14 at 12:28
@RezaRahmati I have fixed it in the comment of Bala's answer — Huangism, Jul 11 '14 at 12:35
this question was answered here http://stackoverflow.com/questions/24697305/inner-div-affected-by-outer-divs-onclick/24697483#24697483 — iamawebgeek, Jul 11 '14 at 12:42

score 4 · Answer 1 · answered Jul 11 '14 at 12:23

4

Use stopPropagation(); in child element

 $("li").click(function (e) {

    alert("li");
});

$("a").click(function (e) {
    e.preventDefault();     // stop the default action if u need 
    e.stopPropagation();
    alert("a");
});

DEMO

answered Jul 11 '14 at 12:23

Balachandran

9,567
1
16
26

2

Here http://jsfiddle.net/HuKab/22/ it's `e.preventDefault()` not `e.preventDefaults()` check your actual code to see if you made this typo or not – Huangism Jul 11 '14 at 12:33
`return false;` does both; – Jai Jul 11 '14 at 12:36
@Huangism Thanks for correcting dictation, but it still doesn't work see http://jsfiddle.net/HuKab/23/ – Reza Jul 11 '14 at 12:39
@RezaRahmati You STILL have `preventDefaults` please check your code carefully. Check the code on your computer and see if this is the issue if so then you should delete the question as it is caused by a typo – Huangism Jul 11 '14 at 12:40
http://jsfiddle.net/HuKab/28/ see that link now .. sorry i used again ur same mistake. should not use two click event for same element you have to use either inline or JS – Balachandran Jul 11 '14 at 12:42
@Huangism Yes I get it, but it doesn't work in my code, I'm going through my code to see what is wrong :) – Reza Jul 11 '14 at 12:44
@RezaRahmati you could update the question with more code if needed – Huangism Jul 11 '14 at 12:45
@Huangism Would you see this link too: http://jsfiddle.net/HuKab/30/ The way I add click is different, and it doesn't work too. – Reza Jul 11 '14 at 12:53
@RezaRahmati does the click of the anchor need to be bound to the body? – Huangism Jul 11 '14 at 13:03
@Huangism yes I need it – Reza Jul 11 '14 at 13:08
@RezaRahmati have a look at http://stackoverflow.com/questions/16492254/pros-and-cons-of-using-e-stoppropagation-to-prevent-event-bubbling I would suggest you to bind the click to the anchor alone AFTER the modal is initialized. This way it is only bound when there is a potential it will be used. Binding to body too much will slow down performance at some point since it is triggered every time something is clicked. It is a better approach and will solve your current issue – Huangism Jul 11 '14 at 13:09

Sjoerd222888 · Answer 2 · 2014-07-11T13:02:50.570

0

It is not very clear to me what your problem really is. If you simply want to get rid of the click on the li tag you may use .unbind() from jQuery (see: http://api.jquery.com/unbind/). You should end up with only your click event.

Another thing that might help is to use something like:

$("a").on('click.myContext', function(event) {
    //Your action goes here
}

This way you can have parallel events and turn them on with $("a").on('click.myContext') and off with $("a").off('click.myContext')

Edit: Use:

$("a").on('click.myContext',function (e) {
    e.stopPropagation();
    alert("a");
});

see working example: http://jsfiddle.net/bGBLz/4/

edited Jul 11 '14 at 13:02

answered Jul 11 '14 at 12:29

Sjoerd222888

3,228
3
31
64

My problem is : I want to click on link and I don't want li click event fired, while I want if I click on li (not link) li click fires – Reza Jul 11 '14 at 12:35
Thanks, the problem is the way I bind the click handler, see http://jsfiddle.net/bGBLz/5/ – Reza Jul 11 '14 at 13:09

Prevent click on outer li while clicking on inner link

Update

Update 2

2 Answers2

DEMO