Languages

Menu
Sites
Language
Long Press / Long click /touch on Gear S/S2 web app

Hi,

I am trying to add a long press event for long presses on my buttons.

Currently I have the basic, "click" event by this command:

b.addEventListener("click", go);

I  realized that long press is not supported by default. So I decided to use hammer.js 

I included the hammer.js by following code on my index.html:

<script type="text/javascript"  src="js/hammer.js"></script>

<script src="js/main.js"></script>

 

Then in the main.js I added the new event by:

var mc = new Hammer(b);

mc.on("press", go2);

 

b is defined by:

b = document.querySelector(".b1);

 

But the go2  function is never triggered.

Even when I disable the go function by disabling "click" event, go2 is not triggered.

How can I add long click/press event to my app ?

examples from:

http://codepen.io/jtangelder/pen/lgELw

Thanks.

 

 

List

Responses

11 Replies
Seoghyun Kang

Dear mekabe remain,

 

If you use the "touchstart" and "touchend" event, you can create the "long touch" event.

Please refer the following code.

 

var touchtimer, 
    flagLock,
    touchduration = 500;

var onlongtouch = function() { 
    alert("Long Touch!!"); 
};

function touchstart(e) {
    e.preventDefault();
	
    if(flagLock){
	return;
    }
	
   touchtimer = setTimeout(onlongtouch, touchduration); 
   flagLock = true;
}

function touchend() {
    if (touchtimer){
       clearTimeout(touchtimer);
       flagLock = false;
    }
}

window.onload = function () {
    window.addEventListener("touchstart", touchstart, false);
    window.addEventListener("touchend", touchend, false);
};

 

It works well on the wearable emulator in Tizen 2.3.1.

Thanks.

mekabe remain

Thanks.

Can I add this event to a "div" element instead of a window ?

 

Seoghyun Kang

Sure. It works well :)

 

var touchtimer, 
    flagLock,
    touchduration = 500;

var onlongtouch = function() { 
    alert("Long Touch!!"); 
};

function touchstart(e) {
    e.preventDefault();
    
    if(flagLock){
	return;
    }
	
   touchtimer = setTimeout(onlongtouch, touchduration); 
   flagLock = true;
}

function touchend() {
    if (touchtimer){
       clearTimeout(touchtimer);
       flagLock = false;
    }
}

window.onload = function () {
    document.getElementById("test").addEventListener("touchstart", touchstart, false);
    document.getElementById("test").addEventListener("touchend", touchend, false);
};

 

<div id="test">TEST</div>

Marco Buettner

Learn the basics of JavaScript and you can find easy the solution ;)

mekabe remain

Ok. Thanks.

 

How can I make the final action (onlongtouch) dynamic according to the element used ?

For example, I need to start function1 when button1 is "long pressed" and function2 when button2 is long pressed.

 

 

Marco Buettner

really?

var button1 = document.querySelector('#button1'),
    button2 = document.querySelector('#button2');

// ADD here the functions from above

// MODIFY the onload function from above
window.onload = function() {
    // add longtouch to button1
    button1.addEventListener('touchstart', ontouchstart, false);
    button1.addEventListener('touchend', ontouchend, false);
    // add longtouch to button2
    button2.addEventListener('touchstart', ontouchstart, false);
    button2.addEventListener('touchend', ontouchend, false);
};

 

mekabe remain

really ?

 

and how does that suggestion answer my question if you start the same function (ontouchstart) for both buttons ?

 

really ?

mekabe remain

If I register click, touchstart and touchend events for one element, both actions in touchstart and click are triggered.

How  can I prevent triggering click action when the touch is "long" ?

Click should be triggered only if the timer has not expired. 

 

Also, how can I make the touchstart function parametric? (passing an integer argument to it ?)

mekabe remain

what can I do to register both click and touchstar/end events and define different actions to each ?

 

Thanks.

 

AVSukhov

Hello,

You can try unbind click event if long press occurs and bind it again after perform long press handler.

mekabe remain

isn't this possible ?

I thought of handling both short and long touch in the same function but that's not easy.