Question

我正在使用流星。我有一堆当前禁用的按钮。我有一个事件监听器，可以在单击按钮时打开模态。现在，这些按钮的状态为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

您无法禁用某个元素 - 因此除了使您的HTML无效外，disabled属性无效。

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

中不支持pointer-events

如何在meteor / javascript

1 个答案: