我在使用angularjs实现菜单时遇到了一个奇怪的问题。
下面的实现在chrome上运行良好，但在firefox中它只在某个时候起作用，其余时间锁定菜单dom对象上的所有onclick事件。
这是我的 menu.html html模板：

<div id="reportNav">
    <ul id="reportsMenu" ng-class="">
        <li class="tabMenu-item {{menu.classes}}" data-ng-repeat="menu in reportDetail.menusinfo">
            <label analytics-event event-source="tab_name" data-ng-bind="menu.liValue"></label>

                <ul class="submenu level1" data-ng-if="menu.subItems.length > 0"> 
                     <!-----  Sub menu implementation  --->
                </ul>
        </li>
    </ul>
</div>

现在，这里是一个附加了上述html模板的指令 directive.js 文件

reportDirectives.directive('reportmenudir', ['$rootScope','$timeout', '$window', function($rootScope,$timeout, $window) {
    return {
        restrict: 'A',
        replace: true,
        templateUrl: appContext+"/menus.html",
        link: function(scope, element, attrs){

            $rootScope.$on('report-loaded', function(event, args){
                if(!scope.reportViewData.reportCommand.fullReport) {
                      element.on('click', scope.handleClickEvent);
                  }

                scope.horizontal = scope.$eval(attrs.horizontal);

                if(scope.reportViewData.reportCommand.fullReport) {
                    $timeout(function(){
                        angular.element("li.tabMenu-item").each(function () {
                            var curObj = angular.element(this);
                            var event = {
                                target: curObj,
                                preventDefault: function () {
                                }
                            }
                            //console.log("calling", curObj.attr("id"));
                            scope.handleClickEvent(event);
                        });
                        angular.element('.floatmenu').floatmenu();
                    });
                }
            });
        }
    };
}]);

这里是对 handleClickEvent controller.js文件中的函数

$scope.handleClickEvent = function (event) {
        angular.element(".tabMenu").find(".submenu").hide();
        var tarEle = event.target || event.srcElement;
        var parentEle = (tarEle) ? angular.element(tarEle).closest("li.tabMenu-item") : null;

        if (null != parentEle && !parentEle.hasClass("nodata") && !parentEle.hasClass("sel")
            && typeof (parentEle.attr("id")) != 'undefined') {
            parentEle.find(".submenu").show();
            angular.element("#reportsMenu").find(".sel").removeClass("sel");
            parentEle.addClass("sel");
            var reportObj = $scope.reportDetail;

            /**
             *  Get details of the selected menu and update the view etc...
             */

        } else {
            event.preventDefault();
        }
    }

所以，如果我在新选项卡中打开页面，或者在同一选项卡中打开页面，并且没有任何错误消息，那么上述实现将在firefox中失败。奇怪的是它有时会起作用（每10次尝试一次）。
同样，上述实现在chrome和safari中每次都能正常工作。
很多天以来，我一直在努力寻找答案，但是运气不好。上述js文件（编译为ngg angular.js后）作为war文件的一部分使用wildfly服务器提供。
在firefox调试器中，当菜单无响应时，onclick事件不会被上述代码块捕获，但当菜单正常工作时，会被调试器断点捕获。

这个问题的根本原因是什么？