Ng-click don't fire when using ng-mouseenter or ng-mouseover on tablet
In my project I am using AngularJS v1.2.16 and Bootstrap v3.1.0.
The following code works correctly on the desktop side, but not when trying to use it through a tablet (ipad). In the case of a tablet, ng-click does not start the first time, only when "tabbing" is again on the div element it is triggered.
<div ng-click="selectObject($index)" ng-class="selectedObject($index)" class="check-obj" ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;">
<span ng-hide="selectedObject[$index]">
<span ng-hide="showwhiteobj"><img src="img/{{imagename}}.svg"/></span>
<span ng-show="showwhiteobj"><img src="img/{{imagename}}-white.svg"/></span>
</span>
</div>
selectObject just sets the array to true or false:
$scope.selectObject = function (objIndex) {
if ($scope.selectObject[objIndex]) {
$scope.selectObject[objIndex] = false;
} else {
$scope.selectObject[objIndex] = true;
}
};
selectedObject returns 'active' or undefined (used in ng class):
$scope.selectedObject = function (objindex) {
if ($scope.selectedObject[objindex]) {
objindex = 'active';
} else {
return undefined;
}
return objindex;
};
It's funny that when you delete
ng-mouseover = "showwhiteobj = true;" ng-mouseleave = "showwhiteobj = false;"
everything works fine (on desktop and on tablets), unfortunately I can't use different images on hover.
And when you try to use ng-mouseover or ng-mouseenter, it only works on the desktop - on the tablet, which only works with an extra "tab / click" on the object.
I don't see any errors on the console side: - (
Any ideas or workarounds?
Thanks a lot guys!
source to share
I too was bitten by it a few days ago. In IO, when you click, the mouse is fired first (if handled in the code) and then the event is fired. So when you remove your mouse event handlers, the code starts working. I would suggest using ng-touch to handle touch events, which handles all these oddities correctly.
Read this article for more details .
source to share
ng-mouseover and ng-mouseleave do not work on touchscreens. It works great on laptops or desktops.
You can try using ng-touch. Try this link
Hope this helps ...!
source to share