停用文本 selection 并在 firefox 40 中使用 select 元素

Question

在我的应用程序中，我们经常使用这种模式：

<select name="select" onfocus=this.select; onClick=this.focus();>
  <option value="value1" selected>Value 1</option> 
  <option value="value2">Value 2</option>
</select>

<script>
document.onmousedown = new Function("return false");
</script>

行document.onmousedown = new Function("return false");旨在防止页面中出现文本select离子。不幸的是，它还会阻止将 mousedown 事件传播到 select 元素。我们使用的解决方法是回调 onfocus=this.select; onClick=this.focus();.

我的问题是它不适用于 Firefox 40：单击 select 框没有任何反应。（适用于 39）

我可以删除行 document.onmousedown = new Function("return false"); 来修复 select 框，但它会允许页面中出现文本 selection。

我的问题是：在 Firefox 40 中，我有什么选择可以同时使用 select 框和不工作的文本 selection？

Answer 1

您可以使用 CSS.

.noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

然后将 noselect class（或任何您想要的称呼）应用到任何您不想让其文本可选的元素。

请参阅 this question，其中讨论了在不同浏览器中对这些不同 css 属性的支持。

停用文本 selection 并在 firefox 40 中使用 select 元素

Deactivate text selection and use select element with firefox 40

html

javascript

firefox

onmousedown