Question

我正在使用angular和requireJs构建的网站作为文件依赖项。一个奇怪的事情发生了，没有任何意外的原因ng-click / ng-mouseover / ng-mouseout停止在firefox上工作。他们在IE10和Chrome上继续正常工作。页面呈现正常，使用控制器和服务，我没有错误，绑定工作。它唯一的ng事件不起作用，只在firefox上运行。任何人都知道为什么会发生这种情况？我尝试过使用data-ng-event，但是dosn不能正常工作。

HTML:    
<div class="btn-group-vertical" role="group" aria-label="Vertical button group" >
    <button type="button" class="btn btn-default" ng-repeat="item in data">
       <a href="#" data-barid="" data-ng-click="clicked()" data-ng-mouseover="activateBar(item.id)" data-ng-mouseout="defuseBar(item.id)">
            {{item.name}}
       </a>
    </button>
</div>

JS
define([],function(){
function MainPage($scope,$http,horizontalBarChart,verticaltalBarChart){
    $scope.data={}; 
    $scope.title = 'title';
    $scope.subtitle = 'subtitle';
    $scope.activateBar = function(id){
        horizontalBarChart.activateBar(id);
    }
    $scope.defuseBar = function(id){
        horizontalBarChart.defuseBar(id);
    }

    $scope.clicked = function(){
        console.log('clicked');
    }
    //horizontalBarChart.init($scope,'horizon');
}
MainPage.$inject = ['$scope','$http','horizontalBarChart','verticaltalBarChart'];
return MainPage;
});

Answer 1

好的，所以我得到了这个问题，由于一些未知的原因，我将尝试进一步研究，将鼠标事件指令绑定到元素在ng-repeat循环中不能很好地工作。它在chrome中工作得很好，但无法在firefox＆amp; IE浏览器。我怀疑它与浏览器的JS引擎的性能率有关。 Chromes JS引擎是目前最快的，它可以管理元素的重复解析，以及更好地将单独的事件监听器附加到它们。

所以为了解决这个问题我正在使用事件委托，将ng-click / ng-mouseevent附加到wraping元素，在wrap上捕获bubling鼠标事件并在那里处理它。这也是为性能附加多个事件处理程序的总体良好实践。 wrap将捕获所有子元素事件，并将使用工厂函数触发$ scope上定义的正确函数。您可以确定使用事件对象单击的元素是什么。

Angular鼠标事件仅在firefox上停止工作

1 个答案: