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

时间:2015-12-31 10:28:19

标签: html angularjs ionic

我正在试用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:

UI

当我点击ClickMe按钮外部时,ClickMe按钮会被按下并调用clickMe()

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

2 个答案:

答案 0 :(得分:2)

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

答案 1 :(得分:0)

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

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