ngDblclick don't work for iOS


#1

How to trigger the double click event?
If I do It don’t work but if I do ng-click it work.
So how can I trigger it?


#2

I wouldn’t risk even trying it but worth a shot

<a ondblclick="{{doSomethingElse();}}" ng-click="doThis()" >Click Me</a>

I think there will be a clash and the ng-click will fire no matter what as there might not be a watch waiting for another click event within a given time normally 500ms i think.


#3

Still don’t work.
But I don’t want to trigger the simple click only the double click


#4

use Angular double click then.

<a ng-dblclick="doSomethingElse()" ng-click="doThis()" > Click Me</a>

I may have just ignored the title of this thread, apologies.

Mat


#5

Yes but the problem is that nothing is happening when I write ng-dblclick=“doSomethingElse()”.
Here is my code

<div ng-repeat="pic in instagrampics" class="list card">
            <div class="item item-avatar">
                <img src='{{pic.user.profile_picture}}'>
                <h2>{{pic.user.username}}</h2>
                <p>Date</p>
            </div>
            <div class="item item-image">
                <img ng-dblclick="{{instagramLike(1);}}" src='{{pic.images.standard_resolution.url}}'>
            </div>
            <a class="item item-icon-left assertive" href="#">
                <i ng-click="instagramLike(1)" class="icon ion-thumbsup"></i>
                <span class="likes">{{pic.likes.count}}</span>
                <span class="caption">{{pic.comments.count}}</span>
            </a>
        </div>

So the event work for the ng-click but not for the ng-dblclick


#6

Have you tried wrapping the <img /> in an anchor tag <a><img /></a> and have the ng-dblclick in that?


#7

Yes I tried. Did ng-dblckick work for you?


#8

I’ve not yet tried to implement a double click just trying to help out.

also no need to use the angular brackets aswell, just ng-dblclick="instagramLike(1)"

made any difference?


#9

See the Pen dPqOMK by Mat Wright (@MWright24) on CodePen.


#10

I’ve the exactly same so I decided to comment my code and paste yours instead. But it still don’t work inside my iOS simulator or iPhone.
But It work great on my browser.
So I don’t know why. But thanks for your time and your answers


#11

Shame isn’t it, have you tried it on the latest release/nightly ? On beta 14 myself and dblclick doesn’t work on my android either so your code isn’t wrong.


#12

I’ve cordova 4.2.0
But I found that iOS don’t support the double click event. So I don’t know how to handle this


#13

I wrote some custom directive (work for iOS):

app.directive('onDoubleClick', function($timeout) {
    return {
        restrict: 'A',
        link: function($scope, $elm, $attrs) {

            var clicks = 0;

            $elm.bind('click', function(evt) {
               
                clicks++;
                if (clicks == 1) {
                    $timeout(function() {
                        if (clicks == 1) {
                            //....
                        } else {
                            $scope.$apply(function() {
                               
                                $scope.$eval($attrs.onDoubleClick);
                            });
                        }
                        clicks = 0;
                    }, 300);
                }
            });

        }
    };
});

DEMO


#14

This works fine. It also fires the single click event, but for me it’s ok. Thanks!


#15

yes, but we do nothing when clicks =1


#16

Thank you a lot, it work perfectly. Why not do if (clicks == 2)? If we want to dessociate double and triple… click


#17

Thank you for your directive… I’ve improved it a little bit:

app.directive(‘onDoubleClick’, function ($timeout) {
return {
restrict: ‘A’,
link: function ($scope, $elm, $attrs) {
var clicks = 0;
var lastClick = new Date();

        $elm.bind('click', function (evt) {
            var dateDiff = new Date() - lastClick;
            if (dateDiff > 300) { // 300 ms
                clicks = 0;
            }
            lastClick = new Date();
            clicks++;
            if (clicks == 1) {
                $timeout(function () {
                    if (clicks == 1) {
                        //....
                    } else {
                        $scope.$apply(function () {
                            $scope.$eval($attrs.onDoubleClick);
                        });
                    }
                }, 300);
            }
        });
    }
};

});

=> now it does’nt fire when clicked 3 or more times…
And reinits when 300 ms without clicking…

To use it, by the way:
<img src="img/myimg.png" on-double-click="doMyAction(args)"/>