javascript - 当文档位于禁用元素上时,不会触发文档的事件
问题描述
当我给文档一个mouseup
事件时,如果鼠标在一个禁用的元素中并且我释放了按钮。文档mouseup
事件处理程序无法触发。我应该如何让处理程序被调用?
例子:
document.addEventListener('mouseup', () => {
console.log('mouseup')
}, true)
const changeBtn = document.getElementById('change')
const testBtn = document.getElementById('test')
changeBtn.onclick = () => {
testBtn.setAttribute('disabled', true)
}
testBtn.onclick = () => {
console.log('testBtn click')
}
<button id="test">test</button>
<button id="change">change</button>
解决方案
pointer-events: none
在:disabled
元素上使用 CSS 集:
document.addEventListener('mouseup', () => {
console.log('mouseup')
}, true)
const changeBtn = document.getElementById('change')
const testBtn = document.getElementById('test')
changeBtn.onclick = () => {
testBtn.setAttribute('disabled', true)
}
testBtn.onclick = () => {
console.log('testBtn click')
}
*:disabled {
pointer-events: none;
}
<button id="test">test</button>
<button id="change">change</button>
推荐阅读
- go - etcd 错误:超出上下文截止日期
- python - 在 python 中打印需要超过 2 秒
- git - 如何为 Jenkins Pipeline 指定 git 污点过滤?
- javascript - 一段时间后,每个播放节点都会触发 `ended` 事件两次
- c - 修复“Node *”类型的空指针错误的加载
- c++ - 在 C++ 中将像 1100010011 这样的句子拆分成单词
- google-cloud-firestore - 订阅主题的 Firestore 架构
- python - Str 仅在特定位置拆分
- node.js - 由于不支持的协议版本,ngx-socket-io 无法连接到服务器
- html - 更改Angular 4中的元素类别