I have a problem, i want like this:
$(window).on('mousewheel', function(event) {
//prevent mousewheel in 1s
//do something, after 1s, enable mousewheel
}
or like this:
you rolled wheel many times in 1s, function in event mousewheel run 1 times.
Someone help me!
You could do something like this:
var mouseWheelEnabled = true;
function doSomethingWithMousewheel(event){
if(mouseWheelEnabled){
//... your code here
// set enabled = false;
mouseWheelEnabled = false;
setTimeout(function(){
mouseWheelEnabled = true;
}, 1000);
}
}
$(window).on('mousewheel', doSomethingWithMousewheel);
var scrollstop = false;
$(window).on('mousewheel', function(event) {
if(!scrollstop) {
scrollstop = true;
setTimeout(() => { scrollstop = false; }, 1000);
}
}
Something like this?
var pauseWheel = false;
$(window).on('mousewheel', function(event) {
if(pauseWheel) {
event.preventDefault();
}
else {
pauseWheel = true;
setTimeout(function(){ pauseWheel = false; }, 1000);
}
}
pauseWheel is a variable true if the mousewheel event fired in the last 1000ms.
I have a page that is similar to http://tv.sky.com/tv-guide/#/day/0.
I used "DragScroll" to make the program area work, and it works.
But here's the problem, I need to prevent the a for keep getting clicked after the drag. So I tried using preventDefault(), and actually it works! but how do I resume the link back so the user can click on it if they weren't dragging? What's could be the event for it?
You can try to use this code:
var down = false;
var drag = false;
$('...').mousedown(function() {
down = true;
}).mouseup(function() {
down = drag = false;
}).mousemove(function() {
if (down) {
drag = true;
}
}).on('click', 'a', function(e) {
if (drag) {
e.preventDefault();
}
});
used something similar to setTimeout instead.
var golocation = function() {
var href = $(this)[0].dataset.href;
window.location = href;
}
var start_time;
$('a')
.on('mousedown', function(e) {
start_time = new Date().getTime();
})
.on('mouseup', function(e) {
var now = new Date().getTime();
if (now - start_time < 100) {
golocation.call(this);
};
});
var gameLink = $("#theGame");
$(window).keydown(function (e) {
if (e.which === 32) {
window.location.href = "thegame.html;
}
});
I am very new to jQuery and I can't seem to figure out where to add the "tap" event for mobile to this code.
This is pretty much all you need: http://jsfiddle.net/gianlucaguarini/56Szw/
*code from fiddle
var getPointerEvent = function(event) {
return event.originalEvent.targetTouches ? event.originalEvent.targetTouches[0] : event;
};
var $touchArea = $('#touchArea'),
touchStarted = false, // detect if a touch event is sarted
currX = 0,
currY = 0,
cachedX = 0,
cachedY = 0;
//setting the events listeners
$touchArea.on('touchstart mousedown',function (e){
e.preventDefault();
var pointer = getPointerEvent(e);
// caching the current x
cachedX = currX = pointer.pageX;
// caching the current y
cachedY = currY = pointer.pageY;
// a touch event is detected
touchStarted = true;
$touchArea.text('Touchstarted');
// detecting if after 200ms the finger is still in the same position
setTimeout(function (){
if ((cachedX === currX) && !touchStarted && (cachedY === currY)) {
// Here you get the Tap event
$touchArea.text('Tap');
}
},200);
});
$touchArea.on('touchend mouseup touchcancel',function (e){
e.preventDefault();
// here we can consider finished the touch event
touchStarted = false;
$touchArea.text('Touchended');
});
$touchArea.on('touchmove mousemove',function (e){
e.preventDefault();
var pointer = getPointerEvent(e);
currX = pointer.pageX;
currY = pointer.pageY;
if(touchStarted) {
// here you are swiping
$touchArea.text('Swiping');
}
});
I have a HTML game that has left and right buttons when the user plays on a mobile. It all was working fine until iOS8 came out. Now the buttons seem really unresponsive. I have been using touchstart and touch end to detect when a user is holding down a button:
document.body.addEventListener('touchstart', function (e) { e.preventDefault(); });
btnLeft.addEventListener('touchstart', function (e) {
dir = "left";
player.isKeyDown = true;
player.isMovingLeft = true;
}, false);
btnLeft.addEventListener('touchend', function (e) {
player.isKeyDown = false;
player.isMovingLeft = false;
}, false);
btnRight.addEventListener('touchstart', function (e) {
player.isKeyDown = true;
player.isMovingRight = true;
dir = "right";
}, false);
btnRight.addEventListener('touchend', function (e) {
player.isKeyDown = false;
player.isMovingRight = false;
}, false);
How to detect a long touch pressure with javascript for android and iphone?
native javascript or jquery...
I want something that sound like :
<input type='button' onLongTouch='myFunc();' />
The problem with using Touch End to detect the long touch is it won't work if you want the event to fire after a certain period of time. It is better to use a timer on touch start and clear the event timer on touch end. The following pattern can be used:
var onlongtouch;
var timer;
var touchduration = 500; //length of time we want the user to touch before we do something
touchstart() {
timer = setTimeout(onlongtouch, touchduration);
}
touchend() {
//stops short touches from firing the event
if (timer)
clearTimeout(timer); // clearTimeout, not cleartimeout..
}
onlongtouch = function() { //do something };
Here is an extended version of Joshua answer, as his code works well till user doesn't perform multitouch (you can tap screen with two fingers and function will be triggered two times, 4 fingers - 4 times).
After some additional test scenarios I even triggered possibility to touch very freequently and receive function executing after each tap.
I added variable named 'lockTimer' which should lock any additional touchstarts before user trigger 'touchend'.
var onlongtouch;
var timer;
var touchduration = 800; //length of time we want the user to touch before we do something
function touchstart(e) {
e.preventDefault();
if (!timer) {
timer = setTimeout(onlongtouch, touchduration);
}
}
function touchend() {
//stops short touches from firing the event
if (timer) {
clearTimeout(timer);
timer = null;
}
}
onlongtouch = function() {
timer = null;
document.getElementById('ping').innerText+='ping\n';
};
document.addEventListener("DOMContentLoaded", function(event) {
window.addEventListener("touchstart", touchstart, false);
window.addEventListener("touchend", touchend, false);
});
<div id="ping"></div>
The solutions posted here ignore the fact that the user needs to touch the screen to initiate scroll. We only want the long-press behavior if the user is not trying to scroll.
function onLongPress(element, callback) {
let timer;
element.addEventListener('touchstart', () => {
timer = setTimeout(() => {
timer = null;
callback();
}, 500);
});
function cancel() {
clearTimeout(timer);
}
element.addEventListener('touchend', cancel);
element.addEventListener('touchmove', cancel);
}
And then:
onLongPress(element, () => {
console.log('Long pressed', element);
});
I've done it this way in my Android app:
registered events listeners:
var touchStartTimeStamp = 0;
var touchEndTimeStamp = 0;
window.addEventListener('touchstart', onTouchStart,false);
window.addEventListener('touchend', onTouchEnd,false);
added functions:
var timer;
function onTouchStart(e) {
touchStartTimeStamp = e.timeStamp;
}
function onTouchEnd(e) {
touchEndTimeStamp = e.timeStamp;
console.log(touchEndTimeStamp - touchStartTimeStamp);// in miliseconds
}
checked time difference and did my stuff
I hope this will help.
Building on the solution by #djanowski to handle touch scroll. This should also prevent context menu and selection on long press.
function onLongPress(element, callback) {
var timeoutId;
element.addEventListener('touchstart', function(e) {
timeoutId = setTimeout(function() {
timeoutId = null;
e.stopPropagation();
callback(e.target);
}, 500);
});
element.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
element.addEventListener('touchend', function () {
if (timeoutId) clearTimeout(timeoutId);
});
element.addEventListener('touchmove', function () {
if (timeoutId) clearTimeout(timeoutId);
});
}
onLongPress(document.getElementById('kitty1'), function(element) {
alert('Meow from ' + element.outerHTML );
});
onLongPress(document.getElementById('kitty2'), function(element) {
alert('Meow from ' + element.outerHTML );
});
img {
max-width: 100%;
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
<p>Long press on kitty! Kitty should meow on 500ms long press but not scroll</p>
<img id="kitty1" src="http://placekitten.com/300/400" />
<img id="kitty2" src="http://placekitten.com/300/300" />
We can calculate the time difference when the touch started and when the touch end. If the calculated time difference exceed the touch duration then we use a function name taphold.
var touchduration = 300;
var timerInterval;
function timer(interval) {
interval--;
if (interval >= 0) {
timerInterval = setTimeout(function() {
timer(interval);
});
} else {
taphold();
}
}
function touchstart() {
timer(touchduration);
}
function touchend() {
clearTimeout(timerInterval);
}
function taphold(){
alert("taphold");
}
document.getElementById("xyz").addEventListener('touchstart',touchstart);
document.getElementById("xyz").addEventListener('touchend',touchend);
For cross platform developers:
Mouseup/down seemed to work okay on android - but not all devices ie (samsung tab4). Did not work at all on iOS.
Further research its seems that this is due to the element having selection and the native magnification interupts the listener.
This event listener enables a thumbnail image to be opened in a bootstrap modal, if the user holds the image for 500ms.
It uses a responsive image class therefore showing a larger version of the image.
This piece of code has been fully tested upon (iPad/Tab4/TabA/Galaxy4):
var pressTimer;
$(".thumbnail").on('touchend', function (e) {
clearTimeout(pressTimer);
}).on('touchstart', function (e) {
var target = $(e.currentTarget);
var imagePath = target.find('img').attr('src');
var title = target.find('.myCaption:visible').first().text();
$('#dds-modal-title').text(title);
$('#dds-modal-img').attr('src', imagePath);
// Set timeout
pressTimer = window.setTimeout(function () {
$('#dds-modal').modal('show');
}, 500)
});
This better solution based on #Joshua, sometimes the code need to be called directly inside event (some web API require user acction to trigger something) for this case you can use this modification:
var longtouch;
var timer;
//length of time we want the user to touch before we do something
var touchduration = 500;
function touchstart() {
longtouch = false;
timer = setTimeout(function() {
longtouch = true;
timer = null
}, touchduration);
}
function touchend() {
if (timer) {
clearTimeout(timer);
timer = null;
}
if (longtouch) {
// your long acction inside event
longtouch = false;
}
}
in setTimeout you set the flag to true and inside touchend, you check if it was set.
This worked for my use-case i.e wanted to execute certain function for the time screen is touched.
let triggerInterval = 200; // in milliseconds
let timerId;
function touchstart(e) {
// e.preventDefault();
timerId = setInterval(yourFunction, triggerInterval);
}
function touchend(e) {
clearInterval(timerId);
}
function yourFunction() {
// perform your logic
}
document.addEventListener("touchstart", touchstart);
document.addEventListener("touchend", touchend);
Note:- Smaller value in triggerInterval will execute yourFunction() more faster.
When you are done with your program, then you can remove the respective event Listeners:
document.removeEventListener("touchstart", touchstart);
document.removeEventListener("touchend", touchend);
Long tap event that working in all browser
(function (a) {
function n(b) { a.each("touchstart touchmove touchend touchcancel".split(/ /), function (d, e) { b.addEventListener(e, function () { a(b).trigger(e) }, false) }); return a(b) } function j(b) { function d() { a(e).data(h, true); b.type = f; jQuery.event.handle.apply(e, o) } if (!a(this).data(g)) { var e = this, o = arguments; a(this).data(h, false).data(g, setTimeout(d, a(this).data(i) || a.longclick.duration)) } } function k() { a(this).data(g, clearTimeout(a(this).data(g)) || null) } function l(b) {
if (a(this).data(h)) return b.stopImmediatePropagation() ||
false
} var p = a.fn.click; a.fn.click = function (b, d) { if (!d) return p.apply(this, arguments); return a(this).data(i, b || null).bind(f, d) }; a.fn.longclick = function () { var b = [].splice.call(arguments, 0), d = b.pop(); b = b.pop(); var e = a(this).data(i, b || null); return d ? e.click(b, d) : e.trigger(f) }; a.longclick = { duration: 500 }; a.event.special.longclick = {
setup: function () {
/iphone|ipad|ipod/i.test(navigator.userAgent) ? n(this).bind(q, j).bind([r, s, t].join(" "), k).bind(m, l).css({ WebkitUserSelect: "none" }) : a(this).bind(u, j).bind([v,
w, x, y].join(" "), k).bind(m, l)
}, teardown: function () { a(this).unbind(c) }
}; var f = "longclick", c = "." + f, u = "mousedown" + c, m = "click" + c, v = "mousemove" + c, w = "mouseup" + c, x = "mouseout" + c, y = "contextmenu" + c, q = "touchstart" + c, r = "touchend" + c, s = "touchmove" + c, t = "touchcancel" + c, i = "duration" + c, g = "timer" + c, h = "fired" + c
})(jQuery);
Bind longclick event with time interval
$('element').longclick(250, longClickHandler);
below function fire on Long Tap on touch device
function longClickHandler() {
alter('Long tap Fired');
}