如何启用上下文菜单单击禁用的选择框[重复]答案

【问题标题】：How to enable contextmenu click on disabled select box [duplicate]如何启用上下文菜单单击禁用的选择框[重复]
【发布时间】：2018-03-21 13:03:56
【问题描述】：

我试图在右键单击具有禁用属性的选择框时调用一个函数。但我无法调用函数。如果我删除禁用属性，则右键单击有效。

function hello() {
  alert('clicked');
  window.event.returnValue = false;
}

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

<select id="testSelect" oncontextmenu="hello()" disabled="true">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

我该怎么做？

【问题讨论】：

鼠标点击disabled元素不会被触发。这就是您的 Handler 不起作用的原因。

标签： javascript html

【解决方案1】：

您将无法在 disabled 选择上触发任何鼠标事件。

但是我添加了一个肮脏的技巧，使用 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>

【讨论】：

这不是 OT 的解决方案（查看我的重复链接，该链接有更好的解决方法）
1) 为什么它不是 OP 的解决方案？ 2) 我对这个问题的看法加入了您的链接，它们之间几乎没有区别。
Ofc 这是因为如果您单击文档中的任意位置并且问题是关于“如何处理禁用元素上的单击事件”，您的事件将被触发。欺骗中绿色标记的答案首先删除了disabled属性
忘记了我的contextmenu处理程序的上下文，我的错。
这不会真正起作用，因为脏黑客不会粘在选择输入上，而是粘在页面顶部。

【解决方案2】：

如果禁用，您可以禁用与此选择的交互，并创建一个虚拟元素来捕捉点击：

let element = document.getElementById('dummy');
element.addEventListener('contextmenu', (e)=>{
  alert('clicked');
  e.preventDefault();
  e.stopPropagation();
});

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

#testSelect:disabled {
  pointer-events: none;
}

<span id="dummy">
  <select id="testSelect" disabled="true">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
  </select>
</span>

【讨论】：

【解决方案3】：

将其包装在标签中，并使用 jquery 中的 .click() 函数调用它。 Click function

【讨论】：

您能否提供一个工作示例？我不认为这是可能的......
这不起作用：jsfiddle.net/eoqawa1q/4
用 id 将其包装在 span 中，然后选择输入进行更改。
注意：您必须获得跨度点击。
所以更新你的答案...这将添加一个点击处理程序到<span> 和 not 到 disabled 输入字段。但是您制定答案的方式根本行不通