单击父元素时调用子按钮元素

Question

我正在试用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()。

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

Answer 1

这是label的属性：

  

当LABEL元素获得焦点时，它会将焦点传递给它   相关控制。

如果你想阻止它，你可以写一个指令：

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

并将其应用于label

<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>

Answer 2

请勿使用标签。使用任何其他元素。

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