javascript - 如何在 meteor/javascript 中禁用 html 元素上的鼠标单击事件

Question

我正在使用 meteor 。我有一堆当前禁用的按钮。我有一个事件监听器，可以在单击按钮时打开一个模式。现在，这些按钮的状态是 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" 似乎会阻止事件。

Answer 1

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

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

中没有得到很好的支持