CODEWITHSUNDEEP
htmlangularjsionic-framework
Anil8753
Anil8753

Reputation: 2735

child button element is getting called on click on parent element

I am trying out the Ionic app. I have the following simple snippet:

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

Which gives the following UI:

UI

When I am clicking outside of the ClickMe button, ClickMe button is pushed up and called the clickMe().

Please help me to understand the reason behind this.

Upvotes: 1

Views: 62

Answers (2)

Shashank Agrawal
Shashank Agrawal

Reputation: 25807

That is the property of a label that:

When a LABEL element receives focus, it passes the focus on to its associated control.

If you want to prevent it, you can write a directive:

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

And apply it to the 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>

Upvotes: 2

K K
K K

Reputation: 18109

Don't use label for that. Use any other element. 

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

Upvotes: 0

Related Questions