Javascript 离子拖放和触摸事件不返回当前DOM元素；卡在接触的第一个元件上

我正在使用Ionic和Angular创建一个应用程序。我试图创建一个自定义突出显示功能使用离子的触摸事件。现在，我能够将一个字符串拆分为一个由空格分隔的字符串数组，并在一个单独的span元素中显示每个单词。我现在要做的是将一个“高亮显示”类应用于用户接触的第一个span元素、用户接触的最后一个span元素以及其间的每个span元素

我计划通过使用拖动事件来实现这一点，每当用户在屏幕上移动手指时，拖动事件就会触发。我想保存第一个接触的span的ID，持续更新最后一个接触的span，并对两个span元素之间的每个span元素应用高亮显示类

当我在Ionic Serve（又名web浏览器）上运行代码时，它似乎工作正常。每个拖动事件都在注册，当前范围的ID保存到我的变量“firstWordID”中。同样，我的变量“lastWordID”保存到每个连续拖动事件生成的当前跨度元素ID中。例如，当我试图突出显示单词1到4时，这就是我在console.log“firstWordID”和“lastWordID”时得到的结果

在爱奥尼亚服务（web浏览器）中：

但每当我在iOS模拟器或手机上的Ionic View中运行它时，拖动事件似乎都不会注册。日志中没有显示任何内容。我尝试过几种方法，包括touchstart、touchmove和touchend，以及拖放和释放，有时事件会持续触发。但是，即使这样，e.srcElement.id也没有得到最新的span id，“firstWordID”和“lastWordID”总是停留在第一个span id上

我在这方面有些生疏，已经做了好几个小时了。任何建议都将不胜感激

我的HTML：

<ion-content scroll="false"> 
    <div detect-gestures gesture-type="drag">
      <span ng-class="{highlighted: word.isHighlighted}" ng-attr-id="{{word.id}}" ng-repeat="word in words track by $index"> {{word.text}} </span>
    </div>
</ion-content>

我的Javascript：

angular.module('leder.controllers', [])

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      $ionicGesture.on('drag', scope.onDrag, elem);
      $ionicGesture.on('release', scope.onRelease, elem);
    }
  }
})

.controller('AppCtrl', function($scope, $ionicModal, $timeout, Notes, $stateParams) {

  //set two variables for first and last word IDs
  var firstWordID = null;
  var lastWordID = null;


 //function to set first and last word IDs
  $scope.onDrag = function dragTest(e) {
    e.preventDefault(); 

    //get ID of current span
    var htmlID = $scope.getHTMLObject(e);

    //if firstWordID doesn't exist yet, save it to the current span
    if (!firstWordID) {
      firstWordID = htmlID;
      console.log("The first word with ID " + firstWordID + " has been tagged");
    }
    //save and continuously update lastWordID with current span
    lastWordID = htmlID;
    console.log("The last word with ID " + lastWordID + " has been tagged");

    //iterate through object array.
    for (var i = 0; i < $scope.words.length; i++){
      //if current element is greater than first word ID and less than last word ID, then change isHighlighted to true
      if ($scope.words[i].id >= firstWordID && $scope.words[i].id <= lastWordID){
        $scope.words[i].isHighlighted = true;
      } 
    };

  };

  //function to get ID of current span
  $scope.getHTMLObject = function htmlTest(e){
    var htmlID = e.srcElement.id;
    return htmlID;
  }
})

角度模块（'leder.controllers'，[]） .directive（'DetectTesters'，函数（$Ionic手势）{ 返回{ 限制：“A”， 链接：功能（范围、要素、属性）{ $Ionicspirate.on（'drag'，scope.onDrag，elem）； $Ionicshistory.on（'release'，scope.onRelease，elem）； } } }) .controller（'AppCtrl'，函数（$scope，$IonicModel，$timeout，Notes，$stateParams）{ //为第一个和最后一个单词ID设置两个变量 var firstWordID=null； var lastWordID=null； //用于设置首个和最后一个单词ID的函数 $scope.onDrag=功能绘图测试（e）{ e、 预防默认值（）； //获取当前范围的ID var htmlID=$scope.getHTMLObject（e）； //如果firstWordID尚不存在，请将其保存到当前范围 如果（！firstWordID）{ firstWordID=htmlID； log（“ID为“+firstWordID+”的第一个单词已被标记”）； } //使用当前范围保存并持续更新lastWordID lastWordID=htmlID； log（“ID为“+lastWordID+”的最后一个单词已被标记”）； //遍历对象数组。 对于（变量i=0；i<$scope.words.length；i++）{ //如果当前元素大于第一个单词ID且小于最后一个单词ID，则将isHighlighted更改为true 如果（$scope.words[i].id>=firstWordID&&$scope.words[i].id

.highlighted {
    background-color: yellow;
}
.normal {
    color:#000000;
}

angular.module('leder.controllers', [])

.directive('detectGestures', function($ionicGesture) {
  return {
    restrict :  'A',

    link : function(scope, elem, attrs) {
      $ionicGesture.on('drag', scope.onDrag, elem);
      $ionicGesture.on('release', scope.onRelease, elem);
    }
  }
})

.controller('AppCtrl', function($scope, $ionicModal, $timeout, Notes, $stateParams) {

  //set two variables for first and last word IDs
  var firstWordID = null;
  var lastWordID = null;


 //function to set first and last word IDs
  $scope.onDrag = function dragTest(e) {
    e.preventDefault(); 

    //get ID of current span
    var htmlID = $scope.getHTMLObject(e);

    //if firstWordID doesn't exist yet, save it to the current span
    if (!firstWordID) {
      firstWordID = htmlID;
      console.log("The first word with ID " + firstWordID + " has been tagged");
    }
    //save and continuously update lastWordID with current span
    lastWordID = htmlID;
    console.log("The last word with ID " + lastWordID + " has been tagged");

    //iterate through object array.
    for (var i = 0; i < $scope.words.length; i++){
      //if current element is greater than first word ID and less than last word ID, then change isHighlighted to true
      if ($scope.words[i].id >= firstWordID && $scope.words[i].id <= lastWordID){
        $scope.words[i].isHighlighted = true;
      } 
    };

  };

  //function to get ID of current span
  $scope.getHTMLObject = function htmlTest(e){
    var htmlID = e.srcElement.id;
    return htmlID;
  }
})