javascript - jQuery longclick 在表和表行中的其他按钮上触发

Question

我有这个表结构:

<table class="table table-datatable table-custom dataTable" id="basicDataTable" aria-describedby="basicDataTable_info" style="width: 1732px;">
    <thead>
       ...some tr...
    </thead>
    <tbody role="alert" aria-live="polite" aria-relevant="all">
         <tr class="odd" id="1">
             <td class=" sorting_1" style="color: rgb(255, 255, 255);">1</td>
             <td class="" style="color: rgb(255, 255, 255);">My Custom string</td>
             <td class>
                 <button type="button" class="btn btn-danger delete row-delete" title="Delete"><i class="fa fa-cogs-remove fa-2x"></i></button>
                 <button type="button" id="row-restart" class="btn btn-success row-restart" title="Restart"><i class="fa fa-cogs-refresh fa-2x"></i></button>
             </td>
         </tr> 
    </tbody>
</table>

我需要当我长按时(比如在 id“row-restart”按钮上长按 1 秒以上来触发消息....我添加了这个 javascript 代码，当在按钮#row-restart 上长按超过 1 秒时才会触发消息消息..但问题是，如果我单击另一个按钮(删除)或单击每次都会触发的表格...这是我使用 javascript 的尝试:

        /* DEFINE - variables */
        var start = 0;

        /* RESTART - long click */
        $('#basicDataTable').on('mousedown', 'button#row-restart', function(e) {
            console.log('long click...')
            /* DEFAULT - disable event */
            e.preventDefault();
            window.type = 1;
            start = new Date().getTime();
        }).on('mouseup', function(e) {
            /* DEFAULT - disable event */
            e.preventDefault();
            if (new Date().getTime() >= (start+1000)) {
                window.type = 2;
                $('#basicDataTable button#row-restart').click();
            }
        }).on('mouseleave', function(e) {
            window.type = 1;
            start = 0;
        });

那么我如何指定只长按按钮重新启动？ (id =“行重新启动”)？

更新:

我对同一个按钮 ID 有两个相同的事件触发器，也许这是问题？

$('#basicDataTable').on('click', 'button#row-restart', function(e) {
            /* DEFAULT - disable event */
            e.preventDefault();
})

$('#basicDataTable').on('mousedown', 'button#row-restart', function(e) {

})

你看到常见的是相同的按钮 id '#basicDataTable' 和 'button#row-restart' 但不同之处只是单击和 mousedown..也许 jQuery 误解了这一点并在每个表行和我单击的不同按钮上触发事件？

Answer 1

将其添加到您的 jquery

e.stopPropagation();