Question

我有一个angular.js应用程序，由于一些非常奇怪的原因我无法掌握，这有效：

<div>
  <input id="foo" style="display:none" ng-click="ctrl.fnc()" />
  <label for="foo" style="button-like">Button</label>
</div>

但这不是：

<div>
  <button ng-click="ctrl.fnc()">Button</button>
</div>

现在，我并不十分关心让后者工作（即使看起来好多了）。我对可能造成这种情况的原因更加困惑。 MDN说＆＃34;当点击或点击a，并且它与表单控件相关联时，也会为相关控件引发结果点击事件。＆＃34;对我来说，这意味着click事件发生在输入元素上，但不会从那里冒泡，然后原始事件继续冒泡。

但是，单击输入不会运行ctrl.fnc（），方法是输入可见或在控制台中运行click（）。

正如我所说，我不需要解决方案 - 我没有时间尝试搜索最小的例子。如果有人能够找出可能导致角度如此行为的原因，那将是一个有趣的奖励，但大多数情况下我只是想知道点击输入的行为与点击相关联的行为有何不同标签。

Answer 1

尝试使用HttpResponse和id="foo"来解决这两个问题，并通过HTML关系进行链接。

希望这可以解决你的困惑。

这与Angular无关。

Answer 2

在基本HTML中，<label>上的点击事件会冒充到与<input>和<input id="foo">相关联的关联<label for="foo">。

document.querySelector('input').addEventListener('click', () => console.log('hello'));

<label for="foo">Label</label>
<input id="foo" />

这与Angular无关。它是HTML的基本方面，也是元素之间的一种特殊情况。点击事件将触发单击输入或标签。

实质上，label.click()会调用其关联的input.click()。这实质上创造了两个不同的事件。

你也可以看到这个触发每个父元素的内容。如果您点击标签，则会同时看到label > form > div和input > form > div。

document.querySelector('div').addEventListener('click', () => console.log('div'));
document.querySelector('form').addEventListener('click', () => console.log('form'));
document.querySelector('input').addEventListener('click', () => console.log('input'));
document.querySelector('label').addEventListener('click', () => console.log('label'));

<div>
  <form>
    <label for="foo">Label</label>
    <input id="foo">
  </form>
</div>

如何将标签上的点击转移到其相关输入？

2 个答案: