One method to disable child nodes inherit parent’s onclick event in JS alone with one Js regex practice.

I do remember I read an article about how to deal with event inheritance situations including their triggered order and different methods of prevention, but I can’t find it any more :(

event.cancelBubble=true

My current solution is event.cancelBubble=true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<td>
    <a href="/admin/zonecard?pid=&#xA;									16747ec3-bc3e-e911-a2c4-000d3a1c82b2&#xA;									&amp;contextname=10 Zone - USPS Based Mapping + Africa"
        onclick="event.cancelBubble=true;">
        <i class="fa fa-cog" alt="Zone Card" title="Zone Card">
        </i>
    </a>
    <a onclick="copyZoneType(this)">
        <i class="fa fa-copy" alt="Copy Zone Card" title="Copy Zone Card"></i>
    </a>
</td>

<script>
    function copyZoneType(srcRow) {
        event.cancelBubble = true;//prevent trigger parent onclick event in the meantime
        let pid = () => {
            var pidStr = srcRow.previousElementSibling.getAttribute('href').replace(/\s/g, '').match(/pid=[A-Za-z0-9-]*/g);
            //result return like "['pid=XXXXXX']"
            return pidStr[0].substring(4);
        };
        console.log(pid);
    }
</script>

stopPropagation()

–Update April 16–

Reference: Event Bubbling - Dealing with the child’s parent

stopPropagation() is another solution

1
2
3
4

$('someElement').on('click', function(e){
    // stop the event from bubbling.
    e.stopPropagation();
});

Restrict event.target

1
2
3
4
5
6
7
8
9
10
11
12
13

function dosomething(){
    //only trigered by specific element
    if(event.target.tagName.toLowerCase() !== 'button'){
    //do something
    }
    
    or 
    
    if(evet.target === document.getElement(s)by XXXX{
    //do something
    }
    
}