Develop Reference

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

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)

Windows 10 Tablet Browser: soft keyboard very buggy

I have a tablet html app. Some pages have <input> and <textarea> together with many other elements: links, menus, texts, ...
If I don't press any <input> or <textarea> everything works ok
As soon as I press one input element, the soft keyboard pops up (as expected).
After entering some text and hiding the keyboard, the keyboard pops up again everytime I click anywhere on the webapp (even in non-focusable elements)
This totally ruins the experience, as you are forced to use the web app with the keyboard always shown.
I have tried many different approaches to manipulate the input focus without any success, like calling blur(), focus() and related methods on the focused component, containers, window ... but seems nothing but reloading the page resets the keyboard state to keep hidden again until a focusable element is tapped.
My experiments:
Checked that pressing outside of the <INPUT> / <TEXTAREA> causes the focus to be removed: onblur() gets called, and document.activeElement returns NULL.
Also tried to manually blur() everything in the document after an onchange is triggered:$("input,textarea").blur() .
Tried to manually giving the focus() to a non-interactive element with a TABINDEX (hacky):
<div id="dummyfocus" tabindex="0">
$("#dummyfocus").focus()
I checked that the dummy element in fact receives focus, the input/textarea unfocuses, but even in this case, the problem persists.
In Android or IOS everything works as expected: Keyboard will not auto-show if no <input> or <textarea> is focused.
Any advice? Any funky microsoft-proprietary css tag I haven't heard about? :)

I have similar issue, after some digging find out that issue reproducible on Microsoft Edge browser( used in win10 uap as rendering engine).
When clicked anywhere active element becomes body element and for some reason (maybe bug) keyboard gets activated, so I added tabindex=0 on container div which is nested in body, so when clicked outside of any focus-able element that container becomes activated element and keyboard popup isn't fired.
for checking which element is activated I used this code
document.body.addEventListener('click', function() {
console.log(document.activeElement);
});
Hope this helps.

I managed to resolve this by adding the following if you are still interested. Added a dummy control to take the focus then change the focus when clicking away from the text area.
$("body").click(function () {
$("#radioDummy").focus();
});
$("#MyTextArea").click(function (e) {
e.stopPropagation();
});

It seems the issue lies in the touchstart event when using the keyboard on Windows 10. When you hide the keyboard (e.g. pressing the close button (x) on the keyboard), the input field still has focus. And when you press anywhere else, the keyboard pops up again. However, pressing anywhere for a longer time (long press) will remove the focus from the input, and not show the keyboard again. This got me thinking, that the problem could be solved hooking up the touchstart event, and prevent the event propagation, and remove the focus from the input.
I created a global #HostListener inside my main AppComponent that listens for touchstart events. When the body is clicked, stop the propagation of the event, and call document.activeElement.blur() (Loose focus).
#HostListener('document:touchstart', ['$event'])
globalTouchEvent(event) {
if (event) event.stopPropagation();
document.activeElement.blur();
}
I have created a Stackblitz that you can test using a Windows 10 tablet.

HTML Prevent Default Click and Drag In Browser

When adding onmousedown and onmouseup events to a div I am noticing that it seems by default if I do not click outside the div and attempt to drag over it again with the mouse, the browser automatically picks up the div as if by some default drag and drop thing. What is this and is there some way to prevent this?
I am using Firefox, HTML5, and again I notice the issue when adding mousedown events to an empty (not sure if the same thing would happen on a populated div). The cursor turns into a closed hand and the browser automatically drags a faded copy of the div.
Edit: I found an exact duplicate and prevented the issue by using
event.preventDefault ? event.preventDefault() : event.returnValue = false;

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

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.