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

我用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"似乎阻止事件。