Как захватить события касания с угловой директивой

Я хотел бы иметь возможность зафиксировать тот факт, что пользователь переместил свой палец через набор элементов DOM на сенсорном устройстве. Этот пример отлично работает на настольном браузере, но не запускает все ожидаемые события при просмотре в мобильном Safari.Как захватить события касания с угловой директивой

Рабочая Plunkr (демонстрирует проблему на мобильном сафари): http://plnkr.co/edit/J8sfuJ9o6DorMSFlK9v2

HTML:

<body ng-controller="MainCtrl"> 
    <p>Hello {{name}}! This works from a desktop browser but not from mobile Safari. I would simply like to be able to drag my finger down, across all four letters, and have their events fire. I thought that touchMove would work in place of mouseMove when running this Plunkr on iOS, but it doesn't.</p> Current letter: {{currentLetter}} 

    <div swipe-over="swipeOver()">A</div> 
    <div swipe-over="swipeOver()">B</div> 
    <div swipe-over="swipeOver()">C</div> 
    <div swipe-over="swipeOver()">D</div> 
</body>

Javascript:

var app = angular.module('plunker', []); 

app.controller('MainCtrl', function($scope, $log) { 
    $scope.name = 'World'; 
    $scope.currentLetter = ""; 

    $scope.swipeOver = function() { 
    $log.info("In swipeOver"); 
    }; 
}); 

app.directive('swipeOver', function($log) { 
    return { 
    restrict: "A", 
    scope: true, 
    link: function(scope, element, attrs) { 
     // For touch devices 
     element.bind("touchmove", function() { 
     scope.$apply(function(evt) { 
      $log.info("in touchmove - " + element.text()); 

      scope.$parent.currentLetter = element.text(); 
     }); 
     }); 

     // For desktops 
     element.bind("mousemove", function(evt, e2) { 
     scope.$apply(function() { 
      $log.info(evt); 
      $log.info(e2); 
      $log.info("in mousemove - " + element.text()); 

      scope.$parent.currentLetter = element.text(); 
     }); 
     }); 
    } 
    }; 
});

Я пробовал библиотеку нг-сенсорную, но это делает не поддерживают вертикальные движения касания, удивительно. В этот момент любая помощь будет оценена в широком смысле. , ,

источник

2013-11-27 blaster

Не может быть связано с этим вопросом: [iphones-safari-touchmove-event-not-working] [1]? [1]: http://stackoverflow.com/questions/3531997/iphones-safari-touchmove-event-not-working –

Привет, я имею ту же проблему. не могли бы вы показать мне, как вы его разрешили? –

В настоящее время это ограничение касания, и я боюсь, что нет действительно хорошего ответа.

Лучшее решение - связать touchmove с родительским элементом, а затем вычислить, какой дочерний элемент находится под текущей точкой касания. На это отвечает jQuery здесь Crossing over to new elements during touchmove.

Вам нужно будет пройти через каждый из дочерних элементов родителя и проверить, находится ли точка касания в пределах своих границ.

источник

2013-12-02 09:43:52 eddiec

Спасибо. Грустно, что это было необходимо - но взволновано, что это сработало! – blaster

-1

Используйте Hammer.JS, это лучшее, что я знаю. Angular-Hammer можно легко модифицировать для поддержки версии 2.

источник

2014-08-11 09:50:01 Delagen

Как захватить события касания с угловой директивой

ответ

Смежные вопросы