[英]How to disable and enable a click event on a table td?
I have a html table. 我有一个html表。 I made one td of this table clickable.
我使这张表中的1吨可点击。 If user clicks, it prints something on screen with a time interval.
如果用户单击,它将在一定时间间隔内在屏幕上打印一些内容。 So, this printing takes time.
因此,此打印需要时间。 I want to disable my click event during print.
我想在打印期间禁用单击事件。 After printing finishes, then again click event should be there.
打印完成后,然后应再次单击事件。 Following is my code:
以下是我的代码:
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;
}
It stops clicking but not getting on again. 它停止单击,但不再继续。 What is wrong with this?
这有什么问题?
As discussed, create a css class 如前所述,创建一个CSS类
.ClickMe {
}
Then add the class to the TD column 然后将类添加到TD列
<td class="ClickMe">
Then capture the click using the class as a selector and set the pointer events to none. 然后使用该类作为选择器捕获单击,并将指针事件设置为none。
$(document).on("click", ".ClickMe", function () {
alert("click");
$(this).css("pointer-events", "none");
});
Clicking again no longer shows the alert. 再次单击将不再显示警报。 I presume that whatever mechanism you call to print, you could reset the pointer events when it returns.
我假定无论调用什么机制进行打印,都可以在返回时重置指针事件。
Thanks 谢谢
create a function for what you want to happen when you click and bind and unbind that function on click when you need it. 创建您想要单击时发生的功能,并在需要时绑定和取消绑定该功能。
here's a test sample 这是一个测试样本
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);
wouldn't this be good enough? 这样不够好吗?
$("#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");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.