Question

<div ng-click="hello()">
    <input type="password" disabled>
</div>

我有上面的HTML脚本。

父div具有单击功能。当我在firefox中单击子输入标记时，父级的单击事件不起作用，但在chrome中它工作正常。从输入标记中删除禁用将使其在mozilla上正常工作，但是我需要禁用此输入标记。

如何在不消除输入标记禁用的情况下使其在Firefox上运行

Answer 1

我知道这是一个老问题，但因为我只是失去了一个小时的大部分时间在同一个问题上我的角8项目时，我想我反正发布为我工作的答案。

首先，这不是 Angular 的问题，而是 Firefox 的问题。似乎 Firefox 根本不会从禁用的输入字段中触发点击事件。因此，单击输入时，没有事件要传播到父级。查看此线程以获取更多信息：Event on a disabled input。顺便说一句，我在对已接受答案的评论中找到了这个解决方案，因此归功于 Doin。

因此，解决此行为的最简单方法是将以下 css 样式添加到 input 元素：

pointer-events: none;

这可以防止元素对指针事件做出反应，这意味着指针事件也不会被禁用的输入“吸收”，而是从父元素触发。

请参阅下面的完整示例：

function hello() {
  document.getElementById('demo').innerHTML = 'Hi there!';
}

div {
  background-color: aqua;
  cursor: pointer;
}

div input:disabled {
  pointer-events: none;
}

<div onClick="hello()">
    <input type="password" disabled>
</div>

<span id="demo"></span>

Answer 2

您是否尝试使用 readonly 而不是禁用？

<div ng-click="hello()">
<input type="password" readonly>
</div>

ng-click不能处理子输入标记（mozilla firefox）

2 个答案: