javascript - 如何启用上下文菜单单击禁用的选择框

Question

<分区>

Answer 1

您将无法在禁用 选择时触发任何鼠标事件。

但是 我添加了一个使用 div 来模拟效果的肮脏技巧:

在您的选择之后放置一个div，将它放在您选择的顶部，并给它一个display: none。

添加 CSS 规则 .yourSelect:disabled + .yourDiv{display: block;} 将新的 div 放在您选择的顶部。

然后您将能够捕获该 div 上的鼠标事件。

演示:

$(document).on('contextmenu','.dirty-hack', e => {
  alert('clicked');
  return false;
});

body {
  margin: 0;
}

#testSelect {
  width: 100px;
  height: 20px;
}

div.dirty-hack {
  position: absolute;
  top: 0;
  display: none;
  width: 100px;
  height: 20px;
}

#testSelect:disabled+.dirty-hack {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="testSelect" disabled="true">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
<div class="dirty-hack"></div>