Ok I feel like I'm crazy...
I'm looking at Mobile Safari on iOs 6.0. I can't seem to establish any rhyme or reason as to when tapping on an element will trigger click. In many cases, it seems I need to tap once to trigger a hover and then again to trigger a click.
The Mobile Safari spec says : "... The flow of events generated by one-finger and two-finger gestures are conditional depending on whether or not the selected element is clickable or scrollable... A clickable element is a link, form element, image map area, or any other element with mousemove, mousedown, mouseup, or onclick handlers... Because of these differences, you might need to change some of your elements to clickable elements..."
It goes on to suggest that the developer "...Add a dummy onclick handler, onclick = "void(0)", so that Safari on iOS recognizes the span element as a clickable element."
However, my testing has shown these statements to be false.
JsFiddle : http://jsfiddle.net/6Ymcy/1/
html
<div id="plain-div" onclick="void(0)">Plain Div</div>
js
document.getElementById('plain-div').addEventListener('click', function() {
alert('click');
});
Try tapping the element on an iPad. Nothing Happens
But I digress. What is important to me is to find out the following question:
Exactly what are the criteria that determine when clicking on an element will fire a 'click' event on the first tap? As opposed to firing a 'hover' event on the first tap and a 'click' event on the second tap.
In my testing, anchor elements are the only elements that I can get to fire a click on the first tap, and then, only occasionally and inconsistently.
Here's where I start to feel crazy. I searched the internet far and wide and found next to nothing about this issue. Is it just me?! Does anybody know where there's been any discussion about the criteria for two-taps and or an approach to dealing with these limitations?
I'm happy to respond to questions/requests.
Thanks!
I had this same issue. The simplest solution is not to bind the mouseenter event on iOS (or any touch enabled target platform). If that is not bound the hover event won't get triggered and click is triggered on the first tap.
iOS will trigger the hover event if an element is "display: none;" in the normal state and "display: block;" or inline-block on :hover.
It is also worthwhile to mention that ':hover' pseudo-class may prevent 'click' event from firing.
As in mobile browsers click is sometimes used to replace hovering action (e.g. to show dropdown menu), they may trigger artificial 'hover' state on first click and then handle click on the second one.
See https://css-tricks.com/annoying-mobile-double-tap-link-issue/ for detailed explanation and examples of that.
I solved this issue by first detecting if it was an iphone, then binding the mouseup event to the function I was trying to call.
if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))){
$('foo').on('mouseup', function(){
...
}
}
I tried other events but mouseup seemed to work best. Other events like touchend were firing even if the user was trying to scroll. Mouseup doesn't seem to get fired if you drag your finger after touching.
Credit David Walsh (and ESPN) for the iPhone detection.
http://davidwalsh.name/detect-iphone
I was having this issue using Bootstrap, and I found out that the culprit was the tooltip. Remove the tooltip from the button and you don't need to tap it twice anymore.
my solution was to remove the :hover state from the css, and when you think about it, mobile browsers should not have :hover state, since there is no hover..
if you want to keep the hover state on desktop, you can use media query, like so:
.button {
background: '#000'
}
#media (min-width: 992px) {
.button:hover {
background: '#fff'
}
}
You need #media (hover) { /* Your styles */ }
As far as I can tell, this problem in various forms is still present.
In 2019, most, if not all of the above cases can be now ameliorated using a CSS only solution... it will however, require some stylesheet refactoring.
label {
opacity:0.6
}
label input[type=radio]:checked+span {
opacity:1
}
.myClass::before { } /* Leave me empty to catch all browsers */
a:link { color: blue }
a:visited { color: purple }
a:hover { } /* Leave me empty to catch all browsers */
a:active { font-weight: bold }
/* Your styles */
#media (hover) {
a:hover { color: red }
.myClass::before { background: black }
label:hover {
opacity:0.8
}
}
You can read in more detail here why Fastclick, :pseudo, <span>, just targeting "desktop" resolutions and first tap is hover and second tap is click are all fixed using #media (hover): https://css-tricks.com/annoying-mobile-double-tap-link-issue/
:hover doesn't offer the clarity it once did as stylus input, touch desktops and mobile have a disparate interpretation of the notion.
The display:none; solution mentioned above works on iOS (not tested on later than 9.3.5), but not on Android.
A hacky css-only solution is to hide the link below the element using a minus z-index and to bring the link up to a positive z-index on :hover or first-touch (with a small transition delay). I guess one could achieve the same result with css translate instead of z-index. Works on iOS and Android.
In this way you can display a hover effect on a link on a touch-screen device with the first tap without activating the url until a second tap.
you can use ontouchstart instead of onclick event on element and call the function focus() on this element if it is input :
document.getElementById('plain-div').addEventListener('touchstart', function() {
//write body of your function here
alert(“hi”);
// if input needs double tap
this.focus();
});
I was googling around to see if i could help you out some and found this piece of code. Try modifying it to your likings and see if you can do what your trying. If you have troubles understanding it let me know and i'll elaborate more. Theres also more to it here where i found it
Jquery hover function and click through on tablet
$('clickable_element').live("touchstart",function(e){
if ($(this).data('clicked_once')) {
// element has been tapped (hovered), reset 'clicked_once' data flag and return true
$(this).data('clicked_once', false);
return true;
} else {
// element has not been tapped (hovered) yet, set 'clicked_once' data flag to true
e.preventDefault();
$(this).trigger("mouseenter"); //optional: trigger the hover state, as preventDefault(); breaks this.
$(this).data('clicked_once', true);
}
});
Never figured out the criteria, but this solved my problem by instantly triggering a click as soon as an element is tapped:
https://developers.google.com/mobile/articles/fast_buttons
I had to make a number of additions/modifications to their code to get it working correctly, let me know if you're interested in my method and I will try to post an explanation.
Cheers :)
If you see this fiddle you will notice that in order to spawn the Tooltip the mouse has to leave and reenter the div foo after the Tooltip has been initialized.
I thought that maybe I could manually trigger the Tooltip using tooltip("open"). Unfortunately, the mouse tracking doesn't work when I do that. See this fiddle.
Does anyone have an idea how I could get the Tooltip to open with mouse tracking enabled without having to leave and reenter the div? In case you are wondering why I need to do this, I am working with WebGL in a canvas element that takes up the entire screen.
I am using the track: true option and I faced to the same problem in a different context. I am working with richfaces and have some ajax calls which rerender parts of a page.
After each rerender, i needed to rebuild tooltips present in the rerendered part so i decided to attach an event handler to the document and to rebuild thoses tooltips on mouseenter, and then manually open them by calling $(...).tooltip('open')... tooltips are displayed correctly but the mouse tracking doesn't work anymore.
So instead of using $(...).tooltip('open'), i trigger a mouseenter event and work with css class to init only once :
jQuery(document).on('mouseenter', '.tt', function() {
jQuery(this).tooltip({
content: function() { ... },
items: ".tt, .ttped",
track: true
})
.toggleClass('tt ttped')
.trigger('mouseenter');
});
I edited your jsFiddle, which rebuild tooltip each time you enter on #foo and another one which init tooltip only once (static content)
This is more of a proof of concept for myself, to fool around and learn what I can and can't do with jQuery, and I have had partial success.
I created an accordion that contains two spans, which serve as name and description, as well as a button that is independently click-able (ie, it does not open or close the accordion.)
Taking that concept, I decided to try and make the name and description editable by turning the name and description spans into text inputs / text areas, which worked fairly well.
The problem however is that when I take the same technique I used on the button and use it on the input and textarea, clicking it does not allow you to move the cursor to different positions. There does not seem to be a way for me to get around this behavior.
I tried event.preventDefault(), which does not work at all.
I tried event.stopPropagation(), which gives the partially working behavior.
and I tried return false, which worked the same way as stopPropagation.
I was wondering if anyone could provide any insight on this issue.
I included the jQuery javascript below, but for a much more concise example I will provide a jsfiddle link here (http://jsfiddle.net/Rakshasas/xFhN3/) which gives you a much more clear example of what I am doing. Note that when you click the accordion to expand it, the spans are hidden and inputs are shown. Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor.
Also, if you do attempt to change the text in the inputs, closing the accordion does indeed update the spans which is the intended result. This is why I am saying my concept partially works.
Thank you.
$(function() {
$(".accordion").accordion({
header: 'h3',
collapsible: true,
active: false,
change: function(event, ui) {
var id = ui.newHeader.find('input:last').val();
$("#status").text(id);
ui.newHeader.find('div.headerContainer input.name').val(ui.newHeader.find('div.headerContainer span.name').text());
ui.newHeader.find('div.headerContainer textarea.desc').val(ui.newHeader.find('div.headerContainer span.desc').text());
ui.oldHeader.find('div.headerContainer span.name').text(ui.oldHeader.find('div.headerContainer input.name').val());
ui.oldHeader.find('div.headerContainer span.desc').text(ui.oldHeader.find('div.headerContainer textarea.desc').val());
ui.newHeader.find('div.headerContainer span').hide();
ui.newHeader.find('div.headerContainer input, div.headerContainer textarea').show();
ui.oldHeader.find('div.headerContainer span').show();
ui.oldHeader.find('div.headerContainer input, div.headerContainer textarea').hide();
}
});
$('input.name, textarea.desc').click(function(event){
event.stopPropagation();
});
$(".delButton").button({
icons: {primary: 'ui-icon-trash'},
text: false
}).click(function(event) {
//Display user friendly text
return false;
});
});
If someone is facing this issue, this is a little trick that worked for me.
PROBLEM: nested jquery accordions with input/textareas elements, cannot gain focus with normal click in Firefox (if you use jquery accordions with NO nested accordions on it, everything works fine). Confirmed by above users.
The sympton relates only to normal click (left click). If you try optional click (right click), the element (input/textarea) WILL gain focus. Weird.
SOLUTION: Just declare this in your document ready function
$(function() {
//some code ...
$("input, textarea").click( function(){
$("input, textarea").blur();
$(this).focus();
});
//more code ...
});
Confirmed (by me) working on IExplorer, Firefox and Chrome.
Seems to work fine in Chrome. This might be browser dependent.
"Clicking the inputs does not close the accordion, but it also does not allow you to position the cursor"
Also fine in Chrome.
I've got a jQuery dialog box with a button to close it. The button has focus when the dialog box opens. The problem is that the focus is a dotted line around the button's text instead of a focus ring around the entire button. I'm using jQuery's smoothness theme.
I'm using the dialog in a WordPress plugin.
My code is:
$('#mydialog').dialog({
title: 'My Title',
position: [619,200],
resizable: false,
buttons: {"OK" : function(){$(this).dialog("close");}}
});
The problem may relate to the browser; the way each browser highlights the focused element differs.
I am using the Jquery UI,
I am using a modal dialog which is working fine, but give a stripped overlay when it is set.
In the Jquery themeroller, I see options for other textures, but I can't figure out how to use them.
Does anybody know?
$('#send_message_form').dialog({ minWidth: 400,
modal: true,
overlay: { opacity: 0.5, background: 'black'} });
Thank you!
In the themeroller options during theme creation, just choose the texture you want. The selected texture will be the overlay of the modal dialog.
If you want to change it manually, change the url portion of the background attribute of the CSS class .ui-widget-overlay, which should be in the jquery-ui-.custom.css file.