Question

我有一个html表。我点了这个表的一个td。如果用户点击，它会在屏幕上以时间间隔打印一些内容。因此，这种打印需要时间。我想在打印期间禁用我的点击事件。打印完成后，再次点击事件应该在那里。以下是我的代码：

var html = "<table class='analysis_table'>"
    +"<tr>"
        +"<th>Mismatch</th>"
        +"<th>Gap (%)</th>"
    +"</tr>"
    +"<tr>"
        +"<td class='clickMM'>"+mismatch+"</td>"
        +"<td>"+gap+"</td>"
    +"</tr>"
+"</table>";

$("#analysis").html(html);

$(document).on("click", ".clickMM", function () {
    $(this).css("pointer-events", "none");
    show(interval)
        .then(function(result){
            if(result == 'done')
                $(this).css("cursor", "pointer");   
        })
        .catch(function notOk(err) {
            console.error(err)
        })
});
function show(interval) {

    var promise = new Promise(function(resolve, reject) {
        printError();
        for(var i=0;i<(Order.length)-1;i++)
        {   printByTime(interval);//this includes setTimeout function
        }
        resolve("done");
        reject("Error");
    });
    return promise;
}

它会停止点击但不会再次开启。这有什么问题？

Answer 1

如上所述，创建一个css类

.ClickMe {            
}

然后将该类添加到TD列

 <td class="ClickMe">

然后使用类作为选择器捕获单击，并将指针事件设置为none。

 $(document).on("click", ".ClickMe", function () {
        alert("click");
        $(this).css("pointer-events", "none");
 });

再次单击不再显示警报。我假设无论您调用什么机制进行打印，都可以在返回时重置指针事件。

由于

Answer 2

创建一个函数，用于在需要时单击并绑定和取消绑定该函数时想要发生的事情。

这是一个测试样本

var tester=function(e){
    e.preventDefault();
    $(".clickMM").css('color','#f00');
    console.log('tester fired');
    //REMOVE CLICK AND DO YOUR TIMED STUFF HERE
    $(".clickMM").unbind("click");
    timer();
}
var timer=function(){
    //DO YOUR TIMED STUFF HERE
    setTimeout(function(){
        $(".clickMM").css('color','#000');
        //ON COMPLETE REBIND USING THIS
        $(".clickMM").bind("click",tester);
    },3000);
}

//ADD THE FUNCTION ON CLICK
$(".clickMM").on("click",tester);

Answer 3

这不够好吗？

$("#mm").click(function(){
    if($(this).attr("name") == "off"){
        $(this).attr("name","on"); // so nothing happens when the user clicks now
        showMismatch(); //prints something on screen with some time interval
        $(this).attr("name","off");  
}   
});

如何在表td上禁用和启用click事件？

3 个答案: