php – disabling the onclick of the parent when clicking on the child

Question:

Hello! There is a code:

<tr name="<?=$arr[$i]['index']?>" onclick="location.href='SMSManager1.php?do=full&index=<?=$i?>'">
    <td><?=$arr[$i]['index']?></td>
    <td><?=$arr[$i]['source']?></td>
    <td><?=$arr[$i]['destination']?></td>
    <td><?=date('d.m.Y H:i:s', $timeToSend)?></td>
    <td><button type="button" class="btn btn-danger btn-xs active" onclick="StopSend(<?=$arr[$i]['index']?>, 1); event.cancelBubble=true;">Stop</button>
    <button type="button" class="btn btn-primary btn-xs active" data-toggle="modal" data-target="#main-modal" onclick="EditSend(this.getAttribute('data-source'), <?= $arr[$i]['index'] ?>); event.cancelBubble=true;" data-source='<?= json_encode($arr, JSON_HEX_QUOT); ?>'>Edit</button>
    <?
    if($arr[$i]['status'] == 1)
    {
    ?>
        <button type="button" class="btn btn-warning btn-xs active" onclick="PauseSend(<?=$arr[$i]['index']?>, 2); event.cancelBubble=true;">Pause</button></td>
    <?
    }
    else if($arr[$i]['status'] == 2)
    {
    ?>
        <button type="button" class="btn btn-success btn-xs active" onclick="PauseSend(<?=$arr[$i]['index']?>, 1); event.cancelBubble=true;">Start</button></td>
    <?
    }
    ?>
</tr>

when one of the buttons is clicked, an onclick is called on the row in the table. used event.cancelBubble=true; to solve this problem event.cancelBubble=true; … For the buttons 'Start', 'Pause', 'Stop' everything works fine and the onclick parent does not work, but for the button 'EditSend' the onclick parent element is triggered.

When you click on the 'Edit' button, a modal window pops up. the button passes the php array to the js function, which processes it and enters the data from the array into the <input> s of the modal window (this is how it should be). but it turns out that when you click on the button, a modal window pops up and the page is immediately refreshed. the parent element's handler is triggered …

tried making an array pass through jquery

var EditBtn = document.getElementById("EditBtn");
EditBtn.addEventListener("click", function(e){
$.ajax({
type: "POST",
url: "functions.php",
data: {'function':'edit', 'index':ind},
success: function(f)
{
    alert(f);
    e.stopPropagation();
    //EditSend2(f);
}
});
e.stopPropagation();
});

to no avail

Answer:

option: event.cancelBubble=true; turned out to be a worker

option:

var EditBtn = document.getElementById("EditBtn");
    var arr = EditBtn.getAttribute('data-source');
    EditBtn.addEventListener("click", function(e){
    e.stopPropagation();
    });

also working, but both options are not for my case, tk. they abort all executions of the event after the current one. and I have a click, and then another event of the output of the modal window, found a way out a little collective farm but working. Created a flag on hovering over buttons.

<tr name="tables" id="<?=$partInfo[$i]['index']?>" 
        onclick="tblClick(<?=$partInfo[$i]['index']?>);">

    $(document).ready(function()
    {
       $('button').mouseover(function(){flag = false});
       $('button').mouseout(function(){flag = true});
    });

    function tblClick(index)
    {
       if(flag) location.href='SMSManager1.php?do=full&index='+index;
    }