No click but only hover triggered on mobile touch-screen in browser - javascript

I have a web-app. There are some elements with the click event bound to them. It works fine on a desktop. But on a tablet when I touch the element it will first not do anything but instead just show that it's hovered with styles. And on the second click it works. How do I disable hover-on-touch and enable clicking on every first touch for the entire app?

These would also trigger on clicking the right mouse button. ---> this is :active state of the element
Maybe this link will help you:
iPad/iPhone hover problem causes the user to double click a link
(sorry, I'm not allowed to add comment yet)

Related

How to set focus and display keyboard in safari with jQuery

I'm trying to set focus and place the cursor in a text box and bring up the keyboard automatically when I pop up a modal dialog. I don't want the user to click anywhere. This works fine everywhere except on mobile Safari.
I tried focus(), touchstart, timeouts, direct and indirect event generation, etc. with jQuery with no luck. Does anyone have any ideas?
Try to generate a click event after setting the focus

manually trigger releasing the pressed/touched element

The essence of the problem is releasing a touch on an element count as click event on an overlay element which is displayed during the touch and hold.
How can I prevent that from happening?
<https://jsfiddle.net/24r1s6nf/1/>
I have recreated this problem in jsfiddle. The problem only happens in mobile browser. Once your tap is finished, the overlay script gets triggered unexpectedly.
I have a script to display a modal on a webpage when an element is pressed/touched for over 1 second, and also display the overlay. The overlay has a function to hide modal when clicked.
The workflow works as follows:
press and hold element h1 for 1 second on z-index 1
display modal on z-index 3
display overlay on z-index 2
The problem is when I release the touch in mobile chrome IOS, the overlay has also been displayed under the touched location. So when I release the touch to display the modal, the click event is automatically triggered on the overlay and also the hide modal script, which is not what I intended to do.
Is there a way to force release a real touchend event on element so that I can use to call before overlay starts.
I tried the following which doesn't work.
var myevent = new Event("mouseup");
myelement.dispatchEvent(myevent);
or
var myevent = new Event("touchend");
myelement.dispatchEvent(myevent);
event.stopPropagation() doesn't work.
I solved it by adding event.preventDefault() inside touchend.

What's the best practice way to make a hover menu work for mobile?

I've looked around but I haven't found an answer to what seems to be a common problem.
I have a basic dropdown menu that is activated on hover (using hoverintent plugin for jQuery). It works fine for desktop browsers but for mobile devices that don't convert hover events to click as iPad does, it doesn't work. Here's the Javascript as it is now:
$('li.threecolumns, li.twocolumns, li.onecolumn').hoverIntent(
function() {
$(this).children('div').fadeToggle(fadeInSpeed);
},
function() {
$(this).children('div').fadeToggle(fadeOutSpeed);
});
My question is: what is the cleanest and least problematic way to use clicks for mobile devices and hover for desktops for a dropdown menu? I had a couple ideas but not sure which:
Attach onclick event and disable hover every time there is a click.
Detect the ability to hover (not sure how this is done) and use a click handler if it's available.
At least iOS automatically interferes with the hover event when there is an event handler so you have to tap once for the hover event and a second time for any click event.
Detection for hove is trivial. Check if the client supports touch. If there is touch, there is no hover.
if ("ontouchstart" in document) {
// touch only code
} else {
// "desktop" code
}
By default iOs and some Androids implement a tap for hover event. It's handy, however, you need to make sure your top-level links lead to a valid anchor. The days of unclickable parent placers are gone and if that link leads only to a page with all the children listed as links, so be it. But make it go somewhere.

Can I clear the focus from a touched div on a mobile?

I have a page intended for desktop and mobile that has buttons allowing the user to touch and hold them to make adjustments. This jsfiddle illustrates the behaviour.
The problem is that on my Android phone, the div acting as a button gets highlighted with focus. It will then no longer respond to touch events until the focus has been taken away from it (by pressing another button) and going back to it.
Is is possible to clear or disable the focus of elements?
Would e.preventDefault be an option?
you can try $("#id").blur(), or simply focus on something else like $("#otherid").focus()

mobile safari 5 not responding to js events until further acton

So check out http://www.toyota.ca/toyota/en/vehicles/yaris-hatchback/gallery using ios 5/mobile safari 5 or simulator press an image on the scroller at the bottom and a lightbox pops. Try to press the next button, you noticed nothing happens. Now if you zoom in/out or change orientation or scroll the page, the image will change.
The js works because the next/prev will become enabled/disabled as you press them but it does not do the animation part until further action. Why is this? is this common? If you try the same page on ios 4 it will work fine.
Don't use a click() handler, use a mousedown() handler.
Mobile devices have a hard time discerning between a click() and a mousedown().
The necessary change is line 472 in common.js, change
var o=p(f,c.prev).click(function(){b.prev()}),q=p(f,c.next).click(function(){b.next()});
to
var o=p(f,c.prev).mousedown(function(){b.prev()}),q=p(f,c.next).mousedown(function(){b.next()});
Either that, or, for every such navigation button, on creation, use:
$(selector).bind('mousedown',$(selector).data("events").click[0].handler)
$(selector).unbind('click',$(selector).data("events").click[0])
Where selector is the jQuery selector for the particular element.
Or you can just use $(class).off to clear the handler once and for all.

Categories

Resources