CODEWITHSUNDEEP
javascriptjquery
Kryptur
Kryptur

Reputation: 745

jQuery: Prevent Click Event from being fired after long tap (mobile)

For mobile devices there is not action like right-clicking - so I want to handle a long press for this.

I also need a normal "click" event.

For the long-press handling I found a solution, but when I add an onClick-listener, the onClick gets fired even if I only want the long-press event to be fired.

How can I prevent the Click Event when the longTap event fires?

Here is the Code + example:

var c = console.log.bind(console);

(function() {
    $.fn.longTap = function(options) {
        
        options = $.extend({
            delay: 1000,
            onRelease: null
        }, options);
        
        var eventType = {
            mousedown: 'ontouchstart' in window ? 'touchstart' : 'mousedown',
            mouseup: 'ontouchend' in window ? 'touchend' : 'mouseup'
        };
        
        return this.each(function() {
            $(this).on(eventType.mousedown + '.longtap', function() {
                $(this).data('touchstart', +new Date);
            })
            .on(eventType.mouseup + '.longtap', function(e) {
                var now = +new Date,
                    than = $(this).data('touchstart');
                now - than >= options.delay && options.onRelease && options.onRelease.call(this, e);
            });
        });
    };
})(jQuery);

$('.long-tap').longTap({
    delay: 1000, // really long tap
    onRelease: function(e) {
        c($(this).position(), e);
        e.stopImmediatePropagation();
        e.preventDefault();
        alert('show context menu or something else:');
    }
});

$('.long-tap').click(function(){
	alert("click");
})
.test {
    width: 200px;
    height: 100px;
    background-color: #DDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test long-tap"></div>

Upvotes: 1

Views: 1297

Answers (2)

Lucy
Lucy

Reputation: 129

You can use contextmenu for right click event:

$(document).on("contextmenu",function(e){
   e.preventDefault();
   // do the stuff
});

When you long press with the finger in your mobile device then the context menu will appear.

Upvotes: 2

Mladen Ilić
Mladen Ilić

Reputation: 1765

There is really no good way to do such thing, what you can do is test if longtap event is registered on event target for click event handler:

$('.long-tap').click(function(){
    if ($(this).data('touchstart')) {
        return;
    }

    ...
});

In general, I think your general approach to implement context menu for touch screen devices should be reconsidered.

Best of luck!

Upvotes: 0

Related Questions