在IE和Firefox中使用ng-mousedown嵌套内部按钮调用Angular控制器功能

Question

我有一个组件，它是一个用于打开和关闭下拉元素的按钮，以及当存在ng-model值时用户清除下拉列表中所选项目的选项，如下所示：

<button class="btn btn-default form-control" type="button" ng-click="ctrl.toggleDropdown($event)" ng-keydown="ctrl.onKeyboardPressed($event)" ng-mouseenter="icon=true" ng-mouseleave="icon=false">

        <span ng-if="ctrl.ngModel !== null" >

            {{ctrl.ngModelValue ? ctrl.ngModelValue : ctrl.placeholder}}

            <i class="removeSelectionIcon" ng-class="{'fa fa-close' : icon}" ng-mousedown="ctrl.clearSelection($event)"></i>

        </span>

</button>

为了简短起见，当用户通过ng-mousedown点击“fa-close”图标时，我需要触发下面的功能：

 function clearSelection($event) {

        console.log("hey there");

        this.ngModel = null;

        this.ngModelValue = "";

        $event.preventDefault();

        $event.stopPropagation();

    }

一切都在Chrome中很棒，但我甚至无法在IE和Firefox中获得console.log。当我点击图标时，下拉菜单只是打开和关闭，就好像我点击按钮本身一样。我注意到，如果我快速双击图标我可以清除所选行，但有人知道我需要做什么才能在点击“fa fa-close”图标时触发mousedown事件？

非常感谢帮助！