Question

我试图通过右键单击已禁用属性的选择框来调用函数。但我无法调用一个函数。如果我删除了禁用的属性，则右键单击正在运行。

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>

我该怎么做？

Answer 1

您无法在-(void)setBorderColor:(UIColor *)borderColor{ self.layer.borderColor = (borderColor).CGColor; } -(UIColor*)borderColor{ return [UIColor colorWithCGColor: self.layer.borderColor]; } //Getter and setter for border width -(void)setBorderWidth:(NSInteger)borderWidth{ self.layer.borderWidth = borderWidth; } -(NSInteger)borderWidth{ return (NSInteger)roundf((self.layer.borderWidth)); }选择中触发任何鼠标事件。

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

在您的选择后添加disabled，将其放在您选择的顶部并为其指定div。

添加CSS规则display: none，将新div放在您选择的顶部。

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

<强>演示：

＆＃13;

.yourSelect:disabled + .yourDiv{display: block;}

＆＃13;

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

＆＃13;

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;
}

＆＃13;

Answer 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>

Answer 3

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

如何启用contextmenu单击禁用的选择框

3 个答案: