当事件只读取消设置时没有数据列表弹出

Question

我的输入文本元素绑定到数据列表元素并设置为只读。当点击输入元素时，它的只读属性被取消设置。但是输入文本时数据列表弹出框没有显示。

但是当您取消对输入元素的聚焦并重新聚焦时，确实会出现。

window.onload = init;
  
function init() {
  var e = document.getElementById('myText');
  e.addEventListener('click', function() { this.readOnly = false; });   
}

<html>
  <body>
    <input type='text' id='myText' list='myList' readonly>
    <datalist id='myList'>
      <option>
        Test1
      </option>
    </datalist>
  </body>
</html>

我正在使用 Firefox 66.0.1。

/edit：这可能是 Firefox 的安全行为与不受信任的事件？有人可以证实这一点吗？

Answer 1

我通过将事件从 click 更改为 mousedown 来修复它。

e.addEventListener('mousedown', function() { this.readOnly = false; });

我对此的解释是，datalist 元素在焦点事件触发时检查输入元素的只读属性，然后决定是否绘制。焦点事件由 mousedown 事件发生。但是 click 事件发生在 mousedown 事件之后。因此，在数据列表检查只读属性后，只读属性发生了变化。

当事件只读取消设置时没有数据列表弹出

No datalist popup when readonly unset by event

javascript

dom-events

html-datalist