I am working with the following HTML structure:
<label ng-mousedown="mousedownHandler($event)"
ng-click="clickHandler($event)">
<input type="checkbox" />
</label>
Within my scope, I have the following methods defined:
$scope.mousedownHandler = function(e) {
console.log('mousedown');
};
$scope.clickHandler = function(e) {
console.log('click');
};
While this plunker demonstrates success: http://plnkr.co/edit/pb02Zy6MtB322dUE4iUE?p=preview, I am facing difficulties replicating it in my own code. Despite some differences, such as not having to manually handle the checkbox model value change in the click handler.
I am unsure why using e.preventDefault() in the click handler is necessary for proper functionality. Failure to do so results in the clickHandler being triggered twice.
Interestingly, altering the order of attributes affects the behavior of the widget in my scenario. Placing ng-mousedown before ng-click causes a double mousedown event and no click, while switching their positions results in a double click event and no mousedown. Could this be an AngularJS bug or am I overlooking something crucial?