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

时间:2014-11-25 10:22:49

标签: javascript angularjs firefox requirejs

我正在使用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;
});

1 个答案:

答案 0 :(得分:1)

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

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