如何在select标签上实现mouseup事件？当前事件未生效求助

你的代码存在两个关键问题，再加上select元素的浏览器默认行为干扰，导致mouseup事件不生效：

1. 参数引用错误：default分支里使用了未定义的全局event，应该用事件回调的参数e，否则会抛出引用错误。
2. select元素的默认行为干扰：如果#selectTag是下拉选择框（<select>），点击后浏览器会弹出下拉菜单，此时mouseup事件不会绑定到原元素上，导致事件无法触发。

修复方案 #

方案1：改用mousedown事件（推荐）

mousedown在select元素上的触发更稳定，同时修正参数错误：

let btn = document.querySelector('#selectTag');
 
btn.addEventListener('mousedown', (e) => {
  let msg = document.querySelector('#message');
  switch (e.button) {
    case 0:
      msg.textContent = 'Left mouse button clicked.';
      break;
    case 1:
      msg.textContent = 'Middle mouse button clicked.';
      break;
    case 2:
      e.preventDefault(); // 阻止右键上下文菜单（可选）
      msg.textContent = 'Right mouse button clicked.';
      break;
    default:
      msg.textContent = `Unknown mouse button code: ${e.button}`;
  }
});

方案2：监听全局mouseup事件（必须用mouseup时）

通过监听document的mouseup事件，判断点击目标是否为目标元素：

let btn = document.querySelector('#selectTag');
let msg = document.querySelector('#message');

document.addEventListener('mouseup', (e) => {
  if (e.target === btn) {
    switch (e.button) {
      case 0:
        msg.textContent = 'Left mouse button clicked.';
        break;
      case 1:
        msg.textContent = 'Middle mouse button clicked.';
        break;
      case 2:
        e.preventDefault();
        msg.textContent = 'Right mouse button clicked.';
        break;
      default:
        msg.textContent = `Unknown mouse button code: ${e.button}`;
    }
  }
});

内容的提问来源于stack exchange，提问作者Madhur