單擊按鈕時帶有按鈕的可單擊表格行同時觸發

Question

我有一個動態創建的表。 每個table row實現了onclick 。

這是我創建表格行的一段代碼：

foreach ($db_response as $row) {
        echo '<tr onclick="open_edit_task_modal(this)" id="row-' . $row['id'] . '" ';
        if (Status::is_in_progress(intval($row['status']))) {
            echo 'class="table-warning"';
        } else if (Status::is_finished(intval($row['status']))) {
            echo 'class="table-success"';
        }
        echo '>';

        echo '<th scope="row">' . $row['id'] . '</th>';
        echo '<td>' . $row['street'] . '</td>';
        echo '<td>' . $row['phone'] . '</td>';
        echo '<td>' . format_date($row['date']) . '</td>';
        echo '<td>' . $row['price'] . '</td>';
        echo '<td>' . $row['comment'] . '</td>';
        echo '<td>' . $row['operator'] . '</td>';
        echo '<td>' . Status::get_status_name_by_id($row['status']) . ' / ';

        if (Status::is_unassigned(intval($row['status']))) {
            echo '<button type="button" class="btn btn-primary btn-sm" onclick="update_task_status(this)">Accept</button>';
        } else if (Status::is_in_progress(intval($row['status']))) {
            $db_response = DB::select_user_by_id(intval($row['worker_id']));

            if ($db_response['name'] === $_SESSION['name'] && $db_response['surname'] === $_SESSION['surname']) {
                echo '<button type="button" class="btn btn-success btn-sm" onclick="update_task_status(this)">Finish</button>';
            } else {
                echo $db_response['name'] . ' ' . $db_response['surname'];
            }
        }

        echo '</td>';
        ...

如您所見，我的<tr>有onclick ，稱為open_edit_task_modal() 。 我位於同一個<tr>上的button具有onclick ，稱為update_task_status() 。

一切都適用於按鈕點擊和行點擊，沒有抱怨。

我唯一的問題是，當我單擊button時， <tr>也被單擊了，所以我同時觸發了onclick 。

我想避免這種行為。 我目前不知道如何實現這樣的事情，請幫忙。

Answer 1

您可以使用 javascript 變量作為標志，例如

stop_tr = 0;


function open_edit_task_modal(_this){
    if(stop_tr == 0){
        // your code ...
    }
}


function update_task_status(_this){
    stop_tr = 1;// stop runinng open_edit_task_modal function
    setTimeout("stop_tr=0;", 2000);// = 2sec , set flag back
    // your code ...
}

或使用 jQuery 事件而不是選擇器而不是onclick屬性

$("#table_id .btn.btn1").on("click",function(){
    // which add 'btn1' class on your button too
    alert("button1 clicked");
});

$("#table_id tr").not('.btn').on("click",function(){
    // run your tr event without all buttons
    alert("tr clicked");
});