我在DOM 绑了 单击 事件,还有 双击事件
下面这样写还是有点冲突。 当操作过快时,请教有什么更完美的 方案
/ 单击td
let timer: any = null
function inputFocus(event: any) {
clearTimeout(timer)
timer = setTimeout(() => {
if (editState) return
// 非编辑状态 点击则全选 input
if (event.target.nodeName != 'TD') return
sDOM = eDOM = endTd.value = startTd.value = event.target
const inputDOM = (event.target as HTMLTableCellElement).children[0] as HTMLInputElement
inputDOM.classList.add('input-focus')
inputDOM.focus()
inputDOM.select() // 输入自动 覆盖 原 input的内容
document.removeEventListener('keydown', tdKeydown) //绑定新事件函数前用removeEventListener移除上次的事件函数即可
document.addEventListener('keydown', tdKeydown)
}, 300);
}
// 双击 td 进入编辑状态
function cellEdit(event: any) {
if (editState) return // 假如已经是编辑状态
const inputDOM = (event.target as HTMLTableCellElement).children[0] as HTMLInputElement
inputDOM.classList.remove('input-focus')
inputDOM.style.pointerEvents = 'auto'
cellRange.weight = '1px'
nextTick(() => {
inputDOM.focus()
inputDOM.selectionStart = 300
})
// console.log(cellEdit, 2, inputDOM);
editState = true
clearTimeout(timer)
}
你 单击 事件设置的延时触发时间太小了吧, 设置600试试
测试事件延时时间300不行, 要设置600才可以
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
</head>
<body>
<input type="button" value="aaaaaaa" onclick="clickfunc();" ondblclick="dblclickfunc();" />
<script type="text/javascript">
let timer = null
function clickfunc() {
clearTimeout(timer)
timer = setTimeout(() => {
console.log("click");
}, 600);
}
function dblclickfunc() {
clearTimeout(timer)
console.log("dblclick");
}
</script>
</body>
</html>
如有帮助,请点击我的回答下方的【采纳该答案】按钮帮忙采纳下,谢谢!
用节流的方式呗 一定时间内只执行一个操作 就不会有冲突了
300毫秒是个分界线,超过300毫秒是单机事件
只能在点击一次按钮后判断后面还有没操作了
防抖?
您好,我是有问必答小助手,您的问题已经有小伙伴帮您解答,感谢您对有问必答的支持与关注!