单击 <select> 但未选择选项后会触发什么事件？

Question

我试图在<select> 打开后触发清理功能，但没有选择任何选项，用户点击离开。

我尝试了change 和blur，但都没有触发。

样品和视觉效果

const select = document.querySelector('select');

select.addEventListener('blur', () => {
    console.log('blur');
});

<select>
  <option>one</option>
  <option>two</option>
  <option>three</option>
</select>

我单击<select>，然后在没有选择选项的情况下单击它之外。 blur 事件直到我在第一次外部点击后执行 第二次 点击后才会触发。

Answer 1

关于打开选择菜单时发生的事件有很多。很可能有一种方法可以创建您自己的 CustomEvent 并通过跟踪其他事件来触发它。如果您可以看到正在发生的事件，您可能会弄清楚一些事情。这是我用来查找 EventTarget 上发生的所有事件的脚本：

EventTarget.prototype.__original_addEventListener = EventTarget.prototype.addEventListener;
EventTarget.prototype.addEventListener = function(listener, callback) {
    if (listener === 'event') {
        for (let key in this) {
            if (key.startsWith('on')) {
                let eventName = key.substr(2, key.length);
                this.__original_addEventListener(eventName,
                function(e) {
                    callback(e);
                });
            }
        }
    } else {
        this.__original_addEventListener(listener, callback);
    }
};

window.onload = function() {
    document.querySelector('#id-of-my-select-tag').addEventListener('event', (e) => {
        console.log(e.type);
    });
};

这仅允许您添加一个名为“事件”的侦听器，该侦听器捕获所有事件。这将输出所有发生的事件，也许您会看到一个模式，它可以帮助您编写一些代码，以根据发生的事件及其发生的顺序检测它何时打开。 （在 Firefox、Chrome 和 Edge 中测试）

Answer 2

没有这样的事件表明 <select> 已打开，但没有选择任何选项并且用户点击离开。

但是，对于<select> 元素，您可以绑定到click 事件，这并不保证选择触发和编写自定义逻辑的选项。我刚刚注意到它需要在 <select> 元素上 2 次点击 才能选择一个选项，而打开它只需要 1 次点击。 通过 click 计数，我们可以确定是否满足先决条件并相应地运行清理代码：

var clicks = 0,
    $select = document.getElementById('select');
$select.onclick = function() {
  clicks++;

  if (clicks === 2) {
    clicks = 0;
  }
};
$select.onblur = function(e) {
  if (clicks === 1) {
    clicks = 0;

    // SELECT WAS OPENED BUT NO OPTION SELECTED
    // CLEANUP CODE GOES HERE

    console.log('CLEAN UP');
  }
};

<select id="select">
  <option>A</option>
  <option>B</option>
</select>

就像@leisheng 和@Kaiido 建议的那样，这不是通用解决方案，仅适用于台式机和鼠标。