I want to stop event bubbling so I am using $event.stopPropagation()
, it is working in all browsers except IE+9 (any version it is not working). I have a div (tile) and switch toggle button inside that. When I click on the tile then a pop-up opens and also another pop up opens on click of the switch toggle button. It is working fine when the tile is clicked i.e., only that pop-up is getting opened but when I click on switch toggle button then tile's open pop-up and switch button pop up opens. Please find the code below
I have tried using $event.preventDefault()
and if($event.stopPropagation){ event = event || $window.event } else { this.$window.cancelBubble = true };
<div class="tile"
data-ng-click="controller.openPopup()">
<div class="tile-header">
<div class="col">
<div class="form-check">
<label class="form-check-label form-check-toggle" ng-click="controller.activateTrigger(controller.myVariable, $event); $event.stopPropagation();">
<input class="form-check-input"
checked="true"
type="checkbox"
ng-click="$event.stopPropagation()"
/>
<span></span>
</label>
</div>
</div>
</div>
<div class="tile-body">
Tile body
</div>
</div>
In IE, I just want the switch button's pop-up to open when the switch button is clicked.
Update: I added $event.stopPropagation();
to my label then it was working but I added an else part in my controller.activateTrigger()
function then I am getting the same problem again. When I click on the input, first parent div's pop up is getting opened and then label's pop up is opening. In the else part I am calling the same function as in parent div contoller.openPopup()
.
JS:
activateTrigger(myVariable, $event) {
if(myVariable) {
// do something
} else {
// when my variable is false
// when variale is true then this part is also getting executed in IE
this.openPopup();
}
}