Html 子按钮元素在单击父元素时被调用

我正在试用Ionic应用程序。我有以下简单的片段：

  <ion-content padding="true" >
  <label class="item item-input item-stacked-label">   
                     <button ng-click="clickMe()">ClickMe</button>        
     </br>
           <div class="input-label">Test Label</div>
  </label>
</ion-content>

点击我


测试标签

这将提供以下UI：

当我在

ClickMe

按钮外单击时，

ClickMe

按钮被向上推并称为

ClickMe（）

---

请帮助我理解这背后的原因。

不要为此使用标签。使用任何其他元素

<div class="item item-input item-stacked-label">
    <button ng-click="clickMe()">ClickMe</button>
    </br>
    <div class="input-label">Test Label</div>
</div>

点击我


测试标签

这是一个

当标签元素接收到焦点时，它将焦点传递给其 关联控制

如果要防止它，可以编写一个指令：

myApp.directive('preventClick', function() {
    return {
        link : function(scope, element, attrs) {
            elemenet.on('click', function(e) {
                e.preventDefault();
            });
        }
    }
});

并将其应用于

标签

<label class="item item-input item-stacked-label" prevent-click>
      <button ng-click="clickMe()">ClickMe</button>        
       </br>
       <div class="input-label">Test Label</div>
</label>

点击我


测试标签

Label将交互发送到按钮，您应该将

br

和

div

放在外部我已经做了一个视觉演示，Label有红色边框，div内部有蓝色边框，如果您单击其中任何一个按钮，单击将被发送到按钮。你必须意识到你正在使用的元素的大小——也许不是过度使用

DIV

use

SPAN

为什么他不应该使用label？@maurycy因为这样：当label元素接收焦点时，它会将焦点传递给它的相关控件。从语义上讲，label是为什么设计的？他应该使用不同的标签way@maurycy我的解决方案一开始就是这么说的——不完全是（对不起，我今天挑食，还没喝咖啡）。您完全忽略了

标签