javascript - 点击事件上的angularjs在firefox中不起作用，但在chrome中工作正常

Question

我在使用 Angularjs 实现菜单时遇到了一个奇怪的问题。

下面的实现适用于 Chrome，但在 Firefox 中它只在某个时候有效，其余时间锁定菜单 DOM 对象上的所有 onclick 事件。

这是我的menu.htmlHTML 模板：

<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>

directive.js现在这里是在文件中附有上述 html 模板的指令

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 后）使用 Wildfly 服务器作为 WAR 文件的一部分提供。

在 Firefox 调试器中，当菜单无响应时，上述代码块不会捕获 onclick 事件，但是当菜单正常工作时，会被调试器断点捕获。

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

标签： javascriptangularjs