I have developed a custom directive that triggers the mousedown/touchstart and mouseup/touchend events to apply/remove a css3 transform (press/release effect) to the element.
It functions perfectly in desktop Chrome and IE, as well as iOS 7 and 6, but on Android 4.4.2 the transform is displayed without the click event being triggered to actually navigate.
The only workaround I found is to click/tap rapidly on the element. It seems like the click event is somehow being blocked or dismissed when tapping at a normal speed.
I have tried applying the directive to divs within <a> tags and divs with an ng-click directive - unfortunately, neither approach works.
EDIT: There is one scenario where it fails to work in all browsers - if the div I attach the directive to also has an ng-click attribute. However, if I add a nested div one level down in the DOM and apply the directive to that div, everything works fine.
Below is an example of a div wrapped in a link
<a ng-href="#/concept/{{conceptOfDay.id}}">
<div class="contentBox" touch-tilt>
<i class="fa fa-2x icon fa-calendar-o"></i>
<div class="itemTitle">concept of the day</div>
<div class="itemSubTitle">{{conceptOfDay.title}}</div>
</div>
</a>
And here is the directive code snippet
angular.module('app').directive('touchTilt', ['$document', function ($document) {
var directive = {
restrict: 'A',
link: function (scope, element, attr) {
function mousedown(event) {
var translateString = "perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(-30px)";
element.css('transform', translateString);
$document.on('touchend mouseup', mouseup);
}
function mouseup(event) {
var idleCss = "perspective(800px) rotateX(0deg) rotateY(0deg) translateZ(0px)";
element.css('transform', idleCss);
$document.off('touchend mouseup', mouseup);
}
element.on('touchstart mousedown', mousedown);
element.click(function () { alert('click event handled'); })
}
};
return directive;
}]);