How to Deativate parent element click event if child anchor tag is clicked?

Question

I have a situation in which I am creating dynamic content from my database. In which I am creating <div> with content in it. And I have added onclick event that <div>. If user click on the content of the div which means on <div> it opens a popup window. But if there is a anchor tag in the content. At that time if user clicks on anchor tag, Both the event executes it also opens the link page and popup.

I want to prevent that div onclick when anchor tag is clicked.

Is there any this that can help me?

Since your generating content serverside, or at least thats what is sounds like. Your best bet may be to add the onclick handler as an attribute. `onclick="return false;"` — user398371, May 20 '16 at 19:56

Meloman · Accepted Answer · 2016-05-20T20:04:49.547

if you use jQuery, try stopPropagation() function like this :

simple example :

$("div a").click(function(e) {
    e.stopPropagation();
    // your code here...
});

Or enhanced example with classes and IDs :

html :

<div id="content">
    ...
    <a href="/your/uri/here" class="noPropagation">my link</a>
    ...
</div>

js:

$("div#content a.noPropagation").click(function(e) {
    e.stopPropagation();
    // your code here...
});

here is documentation : https://api.jquery.com/event.stoppropagation/

score 1 · Answer 2 · answered May 20 '16 at 19:56

Since you're adding the <div> dynamically, you can bind a click event handler to the closest ancestor to the dynamic content. Here's one way to do it:

$('.some-container').on('click', 'div.dynamic-content a', function(event) {
    event.stopPropagation();
});

score 0 · Answer 3 · answered May 20 '16 at 20:00

Here is an example https://jsfiddle.net/7c51j7av/

<div class="outer">
    <div class="inner">
    click me
    </div>
 </div>  



$(".outer").click(function(){
        alert("Here");
    });

    $(".inner").click(function(e){
        e.stopPropagation();
        alert("Stopped it");
    });

How to Deativate parent element click event if child anchor tag is clicked?

3 Answers3