[英]Clicking Icon on Button Triggers Both onClicks (Button & Icon) in React
[英]Clickable table row with button when clicking button triggers both
我有一个动态创建的表。 每个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
。
我想避免这种行为。 我目前不知道如何实现这样的事情,请帮忙。
您可以使用 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");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.