在ng-click中得到错误的目标对象

getting wrong target object in ng-click

本文关键字：错误 目标对象 ng-click      更新时间：2023-09-26

html代码

<div ng-click="sortOrder($event, 'fullName')" class="col-xs-2 sortable asc">
    <span>Name</span>
</div>

这是js代码

$scope.sortOrder = function(event, name) {     
        var $elem = $(event.target);
        var c = $elem.hasClass('desc') ? 'asc' : 'desc';
        $elem.removeClass('asc desc').addClass(c);
    }

单击div后，它将类添加到内部span，而不是div.col-xs-2

改用currentTarget：

var $elem = $(event.currentTarget);

当前目标是在其上创建事件侦听器的元素，目标是触发事件的元素。

这意味着，在您的情况下，如果单击span target将是span，如果单击div target将是div。但在这两种情况下，currentTarget都将是div.

另一个简单的解决方案是使用ng-class。

HTML:

<div ng-click="changeSortOrder()" class="col-xs-2 sortable" ng-class="sortOrder">
  <span>Name</span>
</div>

JS:

$scope.sortOrder = 'asc';
$scope.changeSortOrder = function () {
  $scope.sortOrder = $scope.sortOrder === 'asc' ? 'desc' : 'asc';
};

演示：http://plnkr.co/edit/0zrk7YQ7RCEVbSEj3zSh?p=preview

将逻辑移至指令的示例：

JS:

app.directive('mySort', function () {
  return {
    scope: true,
    link: function (scope, element) {
      var defaultSortOrder = 'asc';
      element.addClass(defaultSortOrder);
      var changeSortOrder = function () {
        var newOrder = element.hasClass('asc') ? 'desc' : 'asc';
        element.removeClass('asc desc').addClass(newOrder);
      };
      element.on('click', changeSortOrder);
      scope.$on('$destroy', function () {
        element.off('click', changeSortOrder);
      });
    }
  }
});

HTML:

<div class="col-xs-2 sortable" my-sort>
  <span>Element 1</span>
</div>
<div class="col-xs-2 sortable" my-sort>
  <span>Element 2</span>
</div>
<div class="col-xs-2 sortable" my-sort>
  <span>Element 3</span>
</div>

演示：http://plnkr.co/edit/9bf8UG6eJGW5AtlxcSgm?p=preview

好吧，我不建议你通过控制器更改DOM元素，但如果你必须这样做（而不是指令，这是首选），那么你需要获得这样的div元素：

var $elem = $event.target.parentNode
相关文章：