fa-touchstart
This directive allows you to specify custom behavior when an element is touched upon a touch surface.
Usage
<ANY fa-touchstart="expression">
</ANY>
Note: For development purposes, enable mobile emulation: https://developer.chrome.com/devtools/docs/mobile-emulation
API
Attr | Type | Details |
---|---|---|
faTouchstart |
expression
|
Expression to evaluate upon touchstart. (Event object is available as |
Example
Upon a touchstart
event firing, fa-touchstart
will evaluate the expression bound to it.
Touchstart fires once when a touch point (finger) is first placed upon the touch surface. If the touch point moves or releases touch, it will not fire another touchstart; touchstart fires once upon the first touch. If the touch point is placed upon the touch surface again, it will fire another touchstart event.
Fa-touchstart on an fa-surface
Fa-touchstart
can be used on an fa-surface
. Internally, a Famous Surface has a .on()
method that binds a callback function to an event type handled by that Surface.
The function expression bound to fa-touchstart
is bound to that fa-surface
's touchstart eventHandler, and when touchstart fires, the function expression will be called.
<fa-modifier fa-size="[100, 100]">
<fa-surface fa-touchstart="touchStart($event)" fa-background-color="'red'"></fa-surface>
</fa-modifier>
var touchStartCounter = 0;
$scope.touchStart = function($event) {
touchStartCounter++;
console.log($event);
console.log("touchStart: " + touchStartCounter);
};
Fa-touchstart on an fa-view
Fa-touchstart
may be used on an fa-view
. The function expression bound to fa-touchstart
will be bound to the fa-view
's internal _eventInput
, the aggregation point of all events received by the fa-view
. When it receives a touchstart
event, it will call the function expression bound to fa-touchstart
.
In the example below, the fa-surface
pipes its Surface events to an instantied Famous Event Handler called myEvents
.
Fa-view
pipes from myEvents
, receiving all events piped by the fa-surface
.
When a touchstart event occurs on the fa-surface
, it is piped to the fa-view
.fa-touchstart
defines a callback function in which to handle touchstart events, and when it receives a touchstart event, it calls touchStart()
.
<fa-view fa-touchstart="touchStart($event)" fa-pipe-from="myEvents">
<fa-modifier fa-size="[100, 100]">
<fa-surface fa-pipe-to="myEvents"
fa-background-color="'orange'">
</fa-surface>
</fa-modifier>
</fa-view>
var EventHandler = $famous['famous/core/EventHandler'];
$scope.myEvents = new EventHandler();
$scope.touchStart = function($event) {
console.log($event);
console.log("fa-view receives the touchstart event from the fa-surface, and calls $scope.touchStart bound to fa-touchstart");
};