We Keep Coding

Why does touchmove default action not work after executing "removeEventListener"?

I want to emulate carousel for horizontal swipe while blocking entire page scroll.
I learned that, In "touchmove" event, "event.preventDefault()" can't be called out because of performance issue.
So i made new event listener to block page scroll and planted it in "touchstart" function. Calculating the coordinate of touched point on a screen, if Y-axis is above 20, it would remove event listener blocking page scroll. so it's intended to operate page scroll action again. It works fine on android mobile and never show any glitches on Iphone devices emulated by Chrome. But on real Iphone devices, it doesn't move in Y-axis direction after removing event listener blocking page scroll.
Here is code below.
function dragFilter(event) { //filter
x = event.targetTouches[0].clientX;
y = event.targetTouches[0].clientY;
deltaX = reference - x;
deltaY = referenceY - y;
if ((deltaY > 20 || deltaY < -20)) {
clearInterval(ticker);
card_Frame.current.removeEventListener("touchmove", dragFilter);
document.body.removeEventListener("touchmove", block, {passive: false}); //remove block event listener
flag_X = 1;
}
else if ((deltaX > 20 || deltaX < -20)) {
card_Frame.current.removeEventListener("touchmove", dragFilter);
card_Frame.current.addEventListener("touchmove", dragX);
reference = event.targetTouches[0].clientX;
flag_X = 2;
}
console.log("dragFilter");
}
function dragX(event) {
x = event.targetTouches[0].clientX;
deltaX = reference - x;
if (deltaX > 2 || deltaX < -2) {
reference = x;
scroll(offset + deltaX);
}
}
function touchup() {
clearInterval(ticker);
if (velocity > 10 || velocity < -10) {
amplitude = 0.6 * velocity;
target_Distance = Math.round(offset + amplitude);
timestamp = Date.now();
requestAnimationFrame(autoScroll);
}
if(flag_X === 0){
card_Frame.current.removeEventListener("touchmove", dragFilter);
document.body.removeEventListener("touchmove", block, {passive: false});
}
else if(flag_X === 1){
flag_X = 0;
}
else{
card_Frame.current.removeEventListener("touchmove", dragX);
document.body.removeEventListener("touchmove", block, {passive: false});
flag_X = 0;
}
}
function touchstart(event) {
reference = event.targetTouches[0].clientX;
referenceY = event.targetTouches[0].clientY;
timestamp = Date.now();
velocity = 0;
amplitude = 0;
start_Move = offset;
ticker = setInterval(track, 25);
card_Frame.current.addEventListener("touchmove", dragFilter);
document.body.addEventListener("touchmove", block, {passive: false}); //add block event listener
}
function touchcanceled(){
clearInterval(ticker);
if(flag_X === 0){
card_Frame.current.removeEventListener("touchmove", dragFilter);
document.body.removeEventListener("touchmove", block, {passive: false});
}
else if(flag_X === 1){
flag_X = 0;
}
else{
card_Frame.current.removeEventListener("touchmove", dragX);
document.body.removeEventListener("touchmove", block, {passive: false});
flag_X = 0;
}
}
card_Frame.current.addEventListener("touchend", touchup);
card_Frame.current.addEventListener("touchstart", touchstart);
card_Frame.current.addEventListener("touchcancel", touchcanceled);
This code works well on android but on Iphone, aforementioned error keeps occurring. It seems like "addEventListener" and "removeEventListener" work fine but after removing event listener blocking page scroll, IOS doesn't revive "touchmove" default action at all.
I hope someone brilliant can help this out. Big thanks in advance.

I want inactive touchstart after each swipe for 1 second and after 1 second touchstart active

I used this link of the stackoverflow for write swiping left/right in my project but now I want inactive touchstart after each swipe for 1 second and after 1 second touchstart active.In below only algorithm that came to my mind, but it does not work well.
var drag = true;
function touchStart(event, passedName){
if(!drag){
// document.removeEventListener('touchstart', touchStart, false);
return;
}
else{
drag = false
}
// do for touchstart
setTimeout(function(){
drag = true;
}, 1000);
}
and I add this code in touchMove:
function touchMove(event){
ul.style.left = event.touches[0].pageX - x + 'px';// touchstart inactive but element still moving
}

You also have to block touchMove:
var dragging = false, blocked = false;
function touchStart(event, passedName){
if(blocked) return;
blocked = true;
setTimeout(() => blocked = false, 1000);
dragging = true;
}
function touchEnd(event) { dragging = false; }
function touchMove(event) {
if(!dragging) return;
//...
}

auto clicker and auto key press in javascript console

i need a little help. i want to make something that you put in console and it press Enter bottom for 2000 times and auto click for 2000 times with no delay ! and a key for stop this action. anyone can help me ? thanks a lot !

With jQuery:
function enter_key(ctrl, alt, shift, which) {
var e = $.Event("keydown");
e.ctrlKey = false;
e.altKey = false;
e.shiftKey = false;
e.which = e.keyCode = 13;
$(document.documentElement || window).trigger(e);
}
var stop = false;
for (var i=0; i<2000; ++i) {
if (!stop) {
enter_key();
}
}
click is simpler:
var stop = false;
for (var i=0; i<2000; ++i) {
if (!stop) {
$('button').click();
}
}
and you can stop the iteration by setting:
stop = true;

i thing about this and i found a code that click on the specific position :
var elem = document.elementFromPoint(x, y);
elem.addEventListener('click', function() {
console.log('clicked')
}, false);
var support = true;
try {
if (new MouseEvent('click', {bubbles: false}).bubbles !== false) {
support = false;
} else if (new MouseEvent('click', {bubbles: true}).bubbles !== true) {
support = false;
}
} catch (e) {
support = false;
}
setInterval(function() {
if (support) {
var event = new MouseEvent('click');
}else{
var event = document.createEvent('Event');
event.initEvent('click', true, true);
}
elem.dispatchEvent(event);
},1000);
and i found this code for get mouse position :
function FindPosition(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
}
so how can i use this code to import mouse position in auto click code ???

swipe on android non responsive

So I have some code to trigger a jquery event and what this code does is every time a user swipes left/right over an area it triggers the event and adds a log to the console.
This has been working fine on my ipad and iphone but today i have come to test it on two seperate android devices and have had little joy.
I have to swipe 20/30 times before it actually logs a swipe.
I wondered if I have an error in my code?
var maxTime = 1000,
// allow movement if < 1000 ms (1 sec)
maxDistance = 50,
// swipe movement of 50 pixels triggers the swipe
target = jQuery('.pageSize'),
startX = 0,
startTime = 0,
touch = "ontouchend" in document,
startEvent = (touch) ? 'touchstart' : 'mousedown',
moveEvent = (touch) ? 'touchmove' : 'mousemove',
endEvent = (touch) ? 'touchend' : 'mouseup';
target.bind(startEvent, function(e) {
// prevent image drag (Firefox)
// e.preventDefault();
startTime = e.timeStamp;
startX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX;
}).bind(endEvent, function(e) {
startTime = 0;
startX = 0;
}).bind(moveEvent, function(e) {
// e.preventDefault();
var currentX = e.originalEvent.touches ? e.originalEvent.touches[0].pageX : e.pageX,
currentDistance = (startX === 0) ? 0 : Math.abs(currentX - startX),
// allow if movement < 1 sec
currentTime = e.timeStamp;
if (startTime !== 0 && currentTime - startTime < maxTime && currentDistance > maxDistance) {
if (currentX < startX) {
// swipe left code here
//slideMobile("forward", pageSize);
console.log("swipeForward");
jQuery(window).trigger('swipeForward');
}
if (currentX > startX) {
// swipe right code here
//slideMobile("back", pageSize);
console.log("swipeBackward");
jQuery(window).trigger('swipeBackward');
}
startTime = 0;
startX = 0;
}
});
Thanks

Disable swiping after first swipe, then reset once done?

I have the following code which allows me to swipe an element, and the element will move, revealing the element underneath. I'd like to be able to swipe once, have the function run, have the div reset it's position, and allow me to swipe once again. Basically, disable the swiping while the function is running, then enable it once the function is over.
Here's my code:
var threshold = {
x: 30,
y: 10
}
var originalCoord = {
x: 0,
y: 0
}
var finalCoord = {
x: 0,
y: 0
}
function touchMove(event) {
finalCoord.x = event.targetTouches[0].pageX
changeX = originalCoord.x - finalCoord.x
var changeY = originalCoord.y - finalCoord.y
if (changeY < threshold.y && changeY > (threshold.y * -1)) {
changeX = originalCoord.x - finalCoord.x
if (changeX > threshold.x) {
// My function which runs when you swipe left
}
}
}
function touchEnd(event) {
}
function touchStart(event) {
originalCoord.x = event.targetTouches[0].pageX
finalCoord.x = originalCoord.x
}
window.addEventListener("touchstart", touchStart, false);
window.addEventListener("touchmove", touchMove, false);
window.addEventListener("touchend", touchEnd, false);
I figured I could use event.preventDefault() or return false to disable dragging once the function runs, but it still ends up allowing me to drag during it.

Pretty hard to figure out what do you want, but to disable the swiping just add helper variable:
var _swipeDisabled = false;
then in touchmove check if swiping is disabled, and if so just return false:
function touchMove(event) {
if (_swipeDisabled) return false; // this line is crucial
finalCoord.x = event.targetTouches[0].pageX
changeX = originalCoord.x - finalCoord.x
var changeY = originalCoord.y - finalCoord.y
if (changeY < threshold.y && changeY > (threshold.y * -1)) {
changeX = originalCoord.x - finalCoord.x
if (changeX > threshold.x) {
_swipeDisabled = true; // add this before calling your function
// My function which runs when you swipe left
}
}
}
And in your function you'll have to enable the swiping again, so just do:
_swipeDisabled = false;
in the function you call there. Simpliest solutions are usually the best, remember!

I was able to solve this by removing then adding back in the EventListener:
if (changeX > threshold.x) {
window.removeEventListener('touchmove', touchMove, false);
// Function
setTimeout(function () {
window.addEventListener('touchmove', touchMove, false);
}, 800)
}