In my project I'm using AngularJS v1.2.16 and Bootstrap v3.1.0.

The following code is correctly working on desktop side but not when trying it via tablet (ipad) In case of tablet, the ng-click is not fired on first time, only when "tabbing" again on the div element, it is fired.

  <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 is just setting an array to true or false:

    $scope.selectObject = function (objIndex) {
        if ($scope.selectObject[objIndex]) {
            $scope.selectObject[objIndex] = false;
        } else {
            $scope.selectObject[objIndex] = true;
        }
    };

selectedObject returns an 'active' or undefined (used in ng-class):

   $scope.selectedObject = function (objindex) {
        if ($scope.selectedObject[objindex]) {
            objindex = 'active';
        } else {
            return undefined;
        }
        return objindex;
    };

funny thing is, that when removing

ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;"

everything is working fine (on desktop and on tablets), unfortunately I cant use different images on hover.

And when trying it with ng-mouseover or ng-mouseenter its only working on desktop - on tablet its only working by doing an extra "tab/click" on the object.

I dont see any errors on console side :-(

Any ideas or workaround?

Thanks a lot guys!

In my project I'm using AngularJS v1.2.16 and Bootstrap v3.1.0.

The following code is correctly working on desktop side but not when trying it via tablet (ipad) In case of tablet, the ng-click is not fired on first time, only when "tabbing" again on the div element, it is fired.

  <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 is just setting an array to true or false:

    $scope.selectObject = function (objIndex) {
        if ($scope.selectObject[objIndex]) {
            $scope.selectObject[objIndex] = false;
        } else {
            $scope.selectObject[objIndex] = true;
        }
    };

selectedObject returns an 'active' or undefined (used in ng-class):

   $scope.selectedObject = function (objindex) {
        if ($scope.selectedObject[objindex]) {
            objindex = 'active';
        } else {
            return undefined;
        }
        return objindex;
    };

funny thing is, that when removing

ng-mouseover="showwhiteobj = true;" ng-mouseleave="showwhiteobj = false;"

everything is working fine (on desktop and on tablets), unfortunately I cant use different images on hover.

And when trying it with ng-mouseover or ng-mouseenter its only working on desktop - on tablet its only working by doing an extra "tab/click" on the object.

I dont see any errors on console side :-(

Any ideas or workaround?

Thanks a lot guys!

• javascript
• angularjs
• angularjs-ng-click

3 Answers 3

I was also bitten by it a few days ago. On IOs, when you tap, mouseover is triggered first (if is is handled in the code) and then click event is triggered. That's why when you remove the mouse event handlers, the code starts working. I would suggest using ng-touch to handle the touch events, which handle all these oddities correctly.

Read this article for more details.

Do have include angular-touch module ? Doc here

ng-mouseover and ng-mouseleave does not work on touch screens. It will work fine on laptops or desktops.

You can try using ng-touch. Try this Link

Hope it helps...!