Two pages grabbing click event on iPad - javascript

I have a website I have written which is cross platform. On the iPad I have to use the mouseup and mouseup events to simulate a click (because it is events imbedded within SVG inside an iFrame and there are special events if someone presses and holds, or presses and drags or presses and releases (clicks))
Here is what is happening.
touchStart event triggered.
touchEnd event triggered.
My script sees that this is a click event and then triggers the following event:
window.parent.window.location.href = "../TRL/SelectHotspot.aspx" + returnString
The browser then goes to that page, but then (strange this...) the control that is in that exact position on the target page recieves a click event. This means that it then moves onto the next page.
Does anyone know what would cause this and how to stop it please? It doesn't happen on desktops (they don't expose the touchstart / touchend event anyway) and not on any android devices.

Related

In JavaScript or jQuery, how to convert ontouchmove event into a basic click event on target

I am running my web app on Chromium on a touch device. It's an industry control panel, not a consumer tablet.
I have a problem when the user means to click (tap) on a button, but their finger moves a little, thus causing the 'ontouchmove' event to fire. I other words, the device reads it as a swipe instead of a click.
When this happens, the click event is not fired, so nothing happens, even though the button's hover is triggered. So, the user sees that their touch was registered (button changes color), but is then frustrated by the fact that nothing happens.
I'm hoping I can put something in index.html that globally converts these swipes into standard old-fashioned clicks.
document.ontouchmove = function() {
// get target of this event
// fire the click event of that target
}
Is this even possible? I have jQuery installed. Is something like hammerjs needed? I'd like to get by with plain old JavaScript, if possible.
Thanks
I'm not really sure but you can try it :
document.on("touchmove", function(e) {
$(e.target).trigger("click");
});

Does buttons and links increase mobile responsivness?

I am curious about this one. Does creating a div imitating a button (with 'click' event binded to it) is user-friendly? I mean, does all mobile browsers accurately treat it and always fire event when div is clicked?
Does replacing such constructions with normal buttons increases responsivness on mobile devices?
Google describes this pretty well i think here.
So as described there, handling the click event adds a 300ms delay because it is waiting to see if it is a double-tap.
The technique involves a bit of JavaScript that allows the button to
respond to touchend events rather than click events. Touchend events
are fired with no delay so this is significantly faster than click
events, however there are a few problems to consider:
If the user tapped somewhere else on the screen and then invokes a
touchend on the button then we should not fire a click.
If the user touches down on the button and then drags the screen a bit and then
invokes a touchend on the button then we should not fire a click.
We want to highlight the button when the user touches down to give it a
pressed state.
We can solve the first two problems by monitoring touchstart and touchmove events as well.
We should only consider a touchend on the button if there was previously a touchstart on the button. Also if there exists a touchmove anywhere that goes past a
certain threshold from the touchstart then we should not handle the
touchend as a click.
We can solve the third problem by adding an onclick handler to the
button as well. Doing so will allow the browser to properly treat it
as a button, and our touchend handler will ensure that the button is
still fast. Also, the presence of an onclick handler serves as a good
fallback for browsers that don’t support touch events.
Another advice from experience would be to avoid anchors for buttons.
They recommend using Touchend instead of click.

Prevent webview's simulated mousedown events in android

I'm trying to write a web application that can respond to both touch events and mouse events. Webview on android (and maybe other environments) trigger a mousedown event and a touchstart event when the phone is tapped. I'm running into a problem where the touchstart event triggers a page change, and the mousedown event is clicking a different button in the new page.
If its possible, the easy solution would be to force webview to not trigger mouse events alongside touch events (but only when an actual mouse is clicked).
I've read the answer here: How to bind 'touchstart' and 'click' events but not respond to both? but it doesn't cover this case.
Anyone know how I can solve this problem in a general way?

jQuery hover event on <a> tag on mobile devices

The jQuery .hover() event seems to work fine on mobile devices (testing it on iOS 5.1 Safari) as long as it's not on a anchor element <a>. Work fine means it will trigger the hover handler that is bound on it.
But, when the hover event is on <a>, the browser is redirected to the URL from href instead.
I want it to hover first on first touch (run the event handler) before it's being redirected (trigger the click) on second touch. Is there any way of doing this?
You must add an event handler to the link that changes something about the DOM (like toggling a class to change background colors, etc.)
From the Mobile Safari docs:
Mouse events are delivered in the same order you'd expect in other web
browsers illustrated in Figure 6-4. If the user taps a nonclickable
element, no events are generated. If the user taps a clickable
element, events arrive in this order: mouseover, mousemove, mousedown,
mouseup, and click. The mouseout event occurs only if the user taps on
another clickable item. Also, if the contents of the page changes on
the mousemove event, no subsequent events in the sequence are sent.
This behavior allows the user to tap in the new content

Multitouch touchEvents not triggered as they should on Safari Mobile

I have various touchEvents detection on a page on Safari Mobile (a controller, if you want to know...). They all work well indepedantly, but whenever I have a first touchpoint pressed, If I touch a new point, the events are triggered when I trigger a new one.
For example :
I hold the stick with a finger. It's not moving
I press a button, a touchStart event should be triggered but is not
If I move the stick, the touchStart event is triggered
If I let go of the button, the touchStart is triggered, but not the touchEnd
If I move the stick (touchMove), the touchEnd is triggered
You understand how in my case it's a problem. I get buttons triggered with delay, or getting stuck until I move the stick, etc...
Is there a workaround ? thanks

Categories

Resources