I'm trying to get around the way iOS handles javascript and scrolling with a js function I'm calling through window.onscroll. The problem is that in iOS, the javascript is not called until after scrolling has stopped. To work around this, I was hoping to add an event listener that prevents the default behavior, calls my function, then dispatches the original touch event. Something like this:
// Helper function to clone event
function clone_obj(obj) {
if(obj == null || typeof(obj) !== 'object') {
return obj;
}
var temp = document.createEvent("TouchEvent");
for (var key in obj) {
temp[key] = obj[key];
}
return temp;
}
document.body.addEventListener("touchstart", function(event) {
event.preventDefault();
// clone the event using helper function
var clonedEvent = clone_obj(event);
// run my javascript function
animateNav();
// initialize and dispatch clonedEvent
clonedEvent.initTouchEvent();
event.target.dispatchEvent(clonedEvent);
});
The clone_obj helper function is derived from an SO post, but it doesn't seem to provide a deep clone. If I try to clone using $.extend or event.constructor, I get TypeError: Illegal constructor.
Anyone know of another workaround, or if it's possible to clone a touch event?
As a side note, I tried the HammerJS library to call my function on swipe and drag events, but it still wasn't calling my function until after scrolling stopped.
