我想用鍵盤和滑鼠觸發一個按鈕。它有效,但如果我用鍵盤觸發它, :active 不會顯示。
HTML
<button id="btn1" onclick="btn1()"> click </button>
CSS
#btn1:active{
transform:scale(1.1);
}
Javascript
document.addEventListener("keydown", function(event) {
if (event.key === '1') {
document.getElementById("btn1").click();
}
});
uj5u.com熱心網友回復:
對于此用例,您需要使用 Javascript 添加/洗掉類。
在keydowneventListner 添加活動類。添加另一個 eventListner keyup,然后洗掉該活動類。
document.addEventListener("keydown", function(event) {
var btn = document.getElementById("btn1");
btn.click();
btn.classList.add('active');
});
document.addEventListener("keyup", function(event) {
var btn = document.getElementById("btn1");
btn.classList.remove('active');
});
function btn1(){
}
#btn1:active{
transform:scale(1.1);
}
.active{
transform:scale(1.1);
}
<button id="btn1" onclick="btn1()"> click </button>
uj5u.com熱心網友回復:
您可以使用selector.style
并使用setTimeout()轉換為默認比例
例子 :
document.addEventListener("keydown", function(event) {
if(event.key == "1"){
clicked(document.getElementById("btn1"));
document.getElementById("btn1").click();
}
});
function clicked(el){
el.style.transform = "scale(1.1)";
setTimeout(()=>{ el.removeAttribute('style'); }, 100);
}
#btn1:active{
transform:scale(1.1);
}
<button id="btn1" onclick="//btn1()"> click </button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/342628.html
標籤:javascript 按钮 事件 触发器
上一篇:Java中的冗余分配與分配前檢查
下一篇:具有兩個背景的影片按鈕
