如何在流星/javascript中禁用禁用html元素上的鼠标单击事件答案

【问题标题】：How to disable mouse click events on disabled html elements in meteor / javascript如何在流星/javascript中禁用禁用html元素上的鼠标单击事件
【发布时间】：2017-02-17 13:16:00
【问题描述】：

我正在使用流星。我有一堆当前被禁用的按钮。我有一个事件监听器，它在单击按钮时打开一个模式。现在，这些按钮的状态是disabled。即便如此，当我单击禁用按钮时，模态仍然打开。禁用元素不会阻止从它生成的任何事件吗？

模板：

<a class="btn btn-sm btn-default" id="{{name}}" name ="editRole"
   disabled="disabled" data-toggle="tooltip" data-placement="top"
   title="Not available right now">
  <em class="fa fa-pencil"></em>
</a>
<a class="btn btn-sm btn-danger" id={{name}} name="deleteRole"
   disabled="disabled"  data-toggle="tooltip" data-placement="top"
   title="Not available right now">
  <em class="fa fa-trash"></em>
</a>

模板事件：

'click [name=editRole]'(event){
        Session.set("editRole",$(this).attr('name'));
        console.log("The role to be edited is: " + Session.get("editRole"));
        Modal.show('editRoleModal');
    },
'click [name=deleteRole]'(event){
        console.log(this);
        console.log("button clicked is: " + $(this).attr('name'));
        Session.set("deleteRole", $(this).attr('name'));
        Modal.show('confirmRoleDeleteModal');
    }

我想到的唯一方法是添加如下所示的禁用类：

disabled="disabled" 似乎只是使图标变灰但仍会生成事件，而class="... disabled" 似乎会阻止事件。

【问题讨论】：

您不能禁用 a 元素 - 因此 disabled 属性没有任何作用，除了使您的 HTML 无效。要停止鼠标事件的工作，请将事件处理程序附加到元素并在其上使用 event.preventDefault()，检查现有单击处理程序中元素上的 data-disabled 属性或在您打开的 CSS 类中使用 pointer-events: none /off 根据需要。虽然请注意 pointer-events 在 IE 中没有得到很好的支持
我刚刚编辑了我的问题。我添加了一些我发现有效的细节
@RoryMcCrossan - 如果您可以将评论作为答案，我可以投票并接受答案。

标签： javascript html meteor dom-events

【解决方案1】：

您不能禁用 a 元素 - 因此disabled 属性没有任何作用，除了使您的 HTML 无效。

要停止鼠标事件的工作，请将事件处理程序附加到元素并在其上使用event.preventDefault()，在现有的点击处理程序中检查元素上的data-disabled 属性或在CSS 类中使用pointer-events: none您可以根据需要打开/关闭。尽管请注意 pointer-events 在 IE 中没有得到很好的支持

【讨论】：