ng-click 不适用于子输入标签（mozilla firefox）答案

【问题标题】：ng-click not working on child input tag (mozilla firefox)ng-click 不适用于子输入标签（mozilla firefox）
【发布时间】：2018-02-21 11:23:44
【问题描述】：

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

我有上面的 HTML 脚本。

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

如何让它在 firefox 上工作而不消除输入标签中的禁用

【问题讨论】：

ng-click 不应该是 onclick 吗？还是你在使用 angularjs？
没有我使用 Angular 1 js
请显示父点击和控制器
- 这是父 div 。 . . . . . . - 这是子 div

标签： javascript jquery html css mozilla

【解决方案1】：

我知道这是一个老问题，但由于我在处理我的 Angular 8 项目时刚刚在同一个问题上浪费了一个小时的大部分时间，所以我想我还是会发布对我有用的答案。

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

因此，解决此问题的最简单方法是将以下 css 样式添加到输入元素：

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>

【讨论】：

非常感谢！它确实帮助我解决了同样的问题。

【解决方案2】：

您是否尝试过使用 readonly 而不是 disabled？

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

【讨论】：

是的，我有。 .但正如我提到的，我对应用程序的要求不允许我删除“已禁用”