Question

我在表格行中有一个复选框。我在此表的每个“ tr”上都有一个双击（自定义）事件，以打开Boostrap 4 Modal。它工作正常，并且只有在我双击它时才会触发，但是如果我选中其中的复选框，它将触发事件并打开Modal。我从未做过任何复选框事件。

HTML：

<tr>
   <td>
     <div class="custom-control custom-checkbox">
       <input id="checkboxL1" type="checkbox" class="custom-control-input">
       <label class="custom-control-label" for="checkboxL1"></label>
     </div>
   </td>
       <td>Info1</td>
       <td>Info2</td>
       <td>Info3</td>
       <td>Valid</td>
 </tr>

Javascript：

var isDbl = false;
var timer = null;

$('#dataTable tbody')
    .on(
            'click',
            'tr',
            function() {

                clearTimeout(timer)
                timer = setTimeout(function() {
                    isDbl = false
                }, 250)
                if (isDbl) {

                var table = $('#dataTable').DataTable();

                if ($(this).hasClass('selected')) {

                    $(this).attr("data-toggle", "modal");
                    $(this).attr("data-target", "#manageModal");
                    $(this).removeClass('selected');
                } else {
                    table.$('tr.selected').removeClass('selected');
                    $(this).attr("data-toggle", "modal");
                    $(this).attr("data-target", "#manageModal");
                    $(this).addClass('selected');
                }

                isDbl = false;
                } else {

                    $(this).removeAttr("data-toggle", "modal");
                    $(this).removeAttr("data-target", "#manageModal");
                    isDbl = true
                }
            });

Answer 1

在这里完全是个猜测，但我认为您的复选框输入会触发两次，因为单击它实际上会触发标签，然后触发标签。结果是两次单击。

对此进行测试以检查是否存在这种情况：

Database Reference

如果是这种情况，请将其添加到$('.custom-checkbox label').live('click', function (event) { alert('clicked'); });点击处理程序函数中即可解决该问题：

$('#dataTable tbody')

Answer 2

谢谢I.R.R.因为你给我这个主意从复选框和标签停止事件传播解决了该问题。我刚刚将以下代码添加到了Datatable click事件中：

                $('.custom-control-label').click(function() {
                    event.stopPropagation();
                });

                $('.custom-control-input').click(function() {
                    event.stopPropagation();
                });

检查表的复选框会触发我的dblclick（自定义）事件

2 个答案: