使用javascript禁用所有控件的点击事件[重复]答案

【问题标题】：Disable click event on all controls using javascript [duplicate]使用javascript禁用所有控件的点击事件[重复]
【发布时间】：2017-03-02 01:34:33
【问题描述】：

我想使用 pure javascript（由于应用程序架构）来禁用 html 页面上的点击事件。

我试过了

document.body.addEventListener("click", function (evt) { evt.preventDefault(); });

但它仍然会打开我的选择。

我以select 为例，我想对每个控件都这样做。

这里是Fiddle

更新不能使用pointer-events:none;，因为我在WPF 应用程序中使用它，遗憾的是它使用了令人沮丧的浏览器IE。

【问题讨论】：

标签： javascript

【解决方案1】：

添加简单的CSS， pointer-events: none，如果你把它给 body 元素，evety click 会被禁用。

<html>
<body  style="pointer-events: none">
<select> 
  <option>a</option>
  <option>b</option> 
</select>
 </body>
  </html>

请运行代码sn-p

 <select style="pointer-events: none"> 
  <option>a</option>
  <option>b</option> 
</select>

Here is the fiddle

为 IE 编辑：

document.addEventListener("click",handler,true);

function handler(e){
    e.stopPropagation();
    e.preventDefault();
}

function cancelDropDown(ev) {
  ev.preventDefault();
}

var showMenu = document.getElementsByClassName("selectElement");

// ...

for ( var i = 0; i < showMenu.length; ++i ) {
    showMenu[i].addEventListener("mousedown", cancelDropDown, false);
}

<select class="selectElement"> 
  <option>a</option>
  <option>b</option> 
</select>
<select class="selectElement"> 
  <option>c</option>
  <option>d</option> 
</select>
<select class="selectElement"> 
  <option>e</option>
  <option>f</option> 
</select>
<a onclick="alert('a')">asd</a>

Fiddle 2

【讨论】：

哦，对不起，但我忘了提到它应该在 IE 中作为 WPF 浏览器使用，仅使用 IE。 +1 的答案。
ID 的问题是我必须知道每个元素的 ID。正如我在问题中提到的，我必须对所有元素都这样做。
点击事件监听器不知何故只对选择起作用，你可以做的是对所有选择标签采取相同的类，并对其执行getelementsbyclassName。

【解决方案2】：

您可以通过 CSS 轻松实现这一点

<select style="pointer-events:none;"> 
   <option>a</option>
   <option>b</option> 
<select>

【讨论】：

我必须使用不支持它的 IE。感谢您的回答。 +1 因为它在其他情况下很有帮助
@Imad，请查看更新后的答案。

【解决方案3】：

标签不支持 onSelect() 和 onClick() 事件。前者是指选择文本（即通过单击+拖动文本字段），因此只能与 and 标记一起使用。 onClick() 事件可以与标签一起使用 - 但是，您可能正在寻找最好使用 onChange() 事件而不是 onClick() 的功能。

链接：How to use onClick() or onSelect() on option tag in a JSP page?

我认为你可以尝试 pointer-events: none 和 style 属性

您可以为此尝试更多答案:) How to completely DISABLE any MOUSE CLICK

我认为你会插入 1 个覆盖元素并将其带到前面的选择元素:)

【讨论】：

【解决方案4】：

<select style="pointer-events: none" id="select" onchange="handleSelect()"> 
  <option value="01">a</option>
  <option>b</option> 
  </select>

并使用以下 javascript

function handleSelect() {
    if (this.value == '01') {
      document.getElementById('select').disabled = true;
     } else {
     document.getElementById('select').disabled = false;
            }
                        }

【讨论】：

我什至不想显示该选项列表。完全禁用。