Databases
StackOverflow2013
Postsdbo
POHow to Capture Touch Events with Angular Directive
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to Capture Touch Events with Angular Directive
    text
    copied!<p>I would like to be able to capture the fact that a user moved their finger through a set of DOM elements on a touch device. This example works fine on a desktop browser but does not fire all the expected events when viewed in mobile Safari.</p> <p>Working Plunkr (demonstrates the issue on mobile safari): <a href="http://plnkr.co/edit/J8sfuJ9o6DorMSFlK9v2" rel="nofollow">http://plnkr.co/edit/J8sfuJ9o6DorMSFlK9v2</a></p> <p>HTML:</p> <pre><code>&lt;body ng-controller="MainCtrl"&gt; &lt;p&gt;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.&lt;/p&gt; Current letter: {{currentLetter}} &lt;div swipe-over="swipeOver()"&gt;A&lt;/div&gt; &lt;div swipe-over="swipeOver()"&gt;B&lt;/div&gt; &lt;div swipe-over="swipeOver()"&gt;C&lt;/div&gt; &lt;div swipe-over="swipeOver()"&gt;D&lt;/div&gt; &lt;/body&gt; </code></pre> <p>Javascript:</p> <pre><code>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(); }); }); } }; }); </code></pre> <p>I have tried the ng-touch library but it does not support vertical touch movements, amazingly. Any help would be massively appreciated at this point . . .</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload