Button inner span not registering click - html

Question

I have a simple button with a span inside it with some boostrap icon as its class.
Nothing serious.
<button ng-click="ctrl.toggleMenuDropDown()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
The problem is that the span part does not register the click. When I click on the rendered button where the icon is, the click is not registered. And I don't know why, or what might be causing that.
But when I add stop propagation to the button it all works fine. Like so:
<button ng-click="ctrl.toggleMenuDropDown(); $event.stopPropagation()" class=" cornerMenuButton menuButton">
<span class="fa fa-reorder"></span>
Menu
</button>
It works fine. Why is that?

Answer 1

It's very hard to know why you are using a span inside a button element but clarifying your question:
You need to add ng-click on the span element also. If you want only the span ng-click to work you need to add event.stopPropagation() to your toggleMenuDropDown(event) function passing event to this function.
The definition of event.stopPropagation is:
The event.stopPropagation() method stops the bubbling of an event to
parent elements, preventing any parent event handlers from being
executed. Tip: Use the event.isPropagationStopped() method to check
whether this method was called for the event.
$("#but").click(function(event){
event.stopPropagation();
});
$("#foo").click(function(){
alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="foo">button
<span id="but">
<span></button>

Answer 2

Try this...Added z-index to my span and it worked out
.reorder{
.fa {
position: relative;
z-index: 1;
}
span {
position: relative;
z-index: 1;
}
}