Javascript: 禁用点击ID后1秒的点击事件
Javascript: Disable the click event for 1 second after an ID is clicked
标题几乎描述了我的问题。我只需要精确地禁用点击事件一秒钟,这样我就不能在那么短的时间内点击网页上的任何其他按钮。
时间结束后,我可以再次点击任何地方。
在那一秒内禁用其他按钮也是可以接受的。
试一试,
$('#id').on('click',function(){
// let a common class(disable-btn) for each button which should be disabled for on second
$('.disable-btn').prop('disabled',true);
setTimeout(function(){
// enable click after 1 second
$('.disable-btn').prop('disabled',false);
},1000); // 1 second delay
});
$('#id').on('click', function() {
// let a common class(disable-btn) for each button which should be disabled for on second
$('.disable-btn').prop('disabled', true);
setTimeout(function() {
// enable click after 1 second
$('.disable-btn').prop('disabled', false);
}, 1000); // 1 second delay
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="id">Click to disable other for 1 second</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button>Will not Disable</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
您可以通过添加 class="disable-btn"
来禁用 #id
按钮本身
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
function disableBtns() {
document.getElementById("btn1").disabled = true;
document.getElementById("btn2").disabled = true;
var timer = setInterval(function(){enableBtns()},1000);
//1000 means 1000 milliseconds
}
function enableBtns(){
document.getElementById("btn1").disabled = false;
document.getElementById("btn2").disabled = false;
clearInterval(timer);
}
</script>
</body>
<button id ="btn1" type="button" onclick="disableBtns()" >Button 1</button>
<button id ="btn2" type="button" onclick="disableBtns()" >Button 2</button>
</html>
标题几乎描述了我的问题。我只需要精确地禁用点击事件一秒钟,这样我就不能在那么短的时间内点击网页上的任何其他按钮。 时间结束后,我可以再次点击任何地方。
在那一秒内禁用其他按钮也是可以接受的。
试一试,
$('#id').on('click',function(){
// let a common class(disable-btn) for each button which should be disabled for on second
$('.disable-btn').prop('disabled',true);
setTimeout(function(){
// enable click after 1 second
$('.disable-btn').prop('disabled',false);
},1000); // 1 second delay
});
$('#id').on('click', function() {
// let a common class(disable-btn) for each button which should be disabled for on second
$('.disable-btn').prop('disabled', true);
setTimeout(function() {
// enable click after 1 second
$('.disable-btn').prop('disabled', false);
}, 1000); // 1 second delay
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="id">Click to disable other for 1 second</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
<button>Will not Disable</button>
<br/>
<button class="disable-btn">Will Disable for 1 sec</button>
<br/>
您可以通过添加 class="disable-btn"
#id
按钮本身
<!DOCTYPE html>
<html>
<body>
<p>A script on this page starts this clock:</p>
<p id="demo"></p>
<script>
function disableBtns() {
document.getElementById("btn1").disabled = true;
document.getElementById("btn2").disabled = true;
var timer = setInterval(function(){enableBtns()},1000);
//1000 means 1000 milliseconds
}
function enableBtns(){
document.getElementById("btn1").disabled = false;
document.getElementById("btn2").disabled = false;
clearInterval(timer);
}
</script>
</body>
<button id ="btn1" type="button" onclick="disableBtns()" >Button 1</button>
<button id ="btn2" type="button" onclick="disableBtns()" >Button 2</button>
</html>