文档的事件不会被触发，当它在一个禁用的元素上时

Question

当我给文档一个 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>

Answer 1

使用CSS设置pointer-events: none on :disabled个元素：

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>

文档的事件不会被触发，当它在一个禁用的元素上时

The event of the document is not triggered, when it is on a disabled element

html

javascript

frontend

dom

dom-events