angularjs on click event not working in firefox but works fine in chrome

I am having one strange issue with a menu implementation using Angularjs.

The below implementation works fine with Chrome but in firefox it works only sometime, and rest of the time locks all onclick event on the menu DOM object.

Here is my menu.html HTML template:

<div id="reportNav">
    <ul id="reportsMenu" ng-class="">
        <li class="tabMenu-item " 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>

Now here is directive attached with the above html template in a directive.js file

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();
                    });
                }
            });
        }
    };
}]);

and here is definition of handleClickEvent function in controller.js file

    $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();
        }
    }

So above implementation fails in Firefox if I open the page in new tab or open in same tab without any error message. The strange thing is it works sometime (once in ~10 attempt).

Also the above implementation works every time in Chrome and Safari.

I have been trying to find this out since many days but there is no luck. The above JS files (after compiled as ngg-angular.js) are served using wildfly server as part of a WAR file.

What can be root cause of the this issue?

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW