I've noticed that when I have long list elements in JQuery Mobile and I try to scroll them, I accidentally select an element. Overall the act of scrolling tends to get confused with tapping.
I did some comparison to a native iOS list and here is the difference:
In JQueryMobile, as long as you do a MouseDown and MouseUp on an element, it is considered a click. It doesn't matter if you've scrolled inbetween the events.
In iOS, if you do a MouseDown on an element and then scroll at all, the MouseDown is effectively canceled. This allows you to tap on something, scroll the page up and release without it being considered a click.
Has anyone noticed this and/or developed a patch for it? If not, any suggestions on a fix?
Related
It seems to be a consistent browser behaviour that when the user drags out of a a element, to avoiding clicking on releasing the mouse button, that that element retains focus until the user clicks somewhere else.
Is there an accessibility related reason for this?
It seems to be a common user behaviour (interaction) to negate a click 'halfway through' and, in MacOS, at least, is the default menubar mouse behaviour.
I guess I'm looking for a way to force a drop of focus on mouseout but I don't know whether this is bad for accessibility.
Incidentally this is visually bad ugly either button is used as a UI object or an a is styled as a button.
Whether the focus remains on the button/link or if you force it away will not cause an accessibility issue with regards to WCAG conformance. It does not fail any guidelines.
It comes close to failing WCAG 3.2.2 On Focus but I think the timing of your events technically makes it pass. The mousedown event causes the focus event and you are not doing anything with the focus event. It's when the mouseup event happens that you're trying to move focus so in theory, you are not changing the context on the focus event.
I'm not sure that means you should do what you have proposed from a UX perspective but there probably aren't a lot of people that rely on the default behavior.
I'm sure that you have seen this kind of problem. I have a page with a list of elements and i have created a class active when i click on them, but when i scroll the page they trigger it (after a light touch) and became "active". I don't know how to do, this is the code which i use now, but it is no perfect because don't work at 100%
$("ul li").bind("vmousedown",function(){
$(this).addClass("active");
}).bind("vmouseup vmouseout scrollstart scrollstop", function(){
$(".active").removeClass("active");
});
Do you have others solutions for this problem?
In a phonegap app that is almost finished, I dynamically insert elements into the dom while scrolling. For this I use the 'touchmove' and 'scroll' callbacks. The problem I'm currently facing, is that the dom only updates after the scrolling has finished. After doing some research, I now think the cause is that phonegap doesn't update the dom after scrolling has finished.
Has any of you faced this problem themselves, and found a solution for it?
Update
The result of my tests was that javascript is not updated at all while scrolling. I would like to know why this is, and what a good way would be to execute javascript and update the dom while scrolling. If you can think of another way to update elements when the viewport is near them, that would also be fine. At the moment everything updates when the user stops scrolling, but if the user doesn't, he meets 'empty' page space.
Request for scroll detection code
This is what I currently use to detect scrolling.
document.addEventListener("touchmove", callback, false); // This works on android, but on iOS the callback is called when scrolling stops. Usually multiple times, because they stack while scrolling and not being executed. I see the event being executed during touchmove, but when the viewport begins moving, the callbacks pause until after the scrolling ends.
document.addEventListener("scroll", callback, false); // This is only executed once, and only when scrolling has fully stopped; the viewport is not moving anymore. On android this is executed all the time during scrolling, which is good.
The combination of updating only during touchmove, and another time when scrolling has stopped would be sufficient. The chance that the user scrolls so fast(after the touchmove) that he meets empty space is very small. The problem is the touchmove event callback is not executed during scrolling.
I would recommend taking a look at iScroll, which can give you a lot of control over user scrolling.
It can register when a user has scrolled to a certain point and then you can execute a function to load more DOM elements, then instantly refresh the scroll to continue the user experience with the updated elements.
I have a jQuery Mobile app and the first page has a bunch of controls on it as well as blank areas.
I need to detect that the user has touched the screen, anywhere, and move to another page on touch.
Is there a way to do this naturally through jQuery Mobile or do I need to code it all in?
You could check for tap event. ::Triggers after a quick, complete touch event.
Ref: jqueryMobile
Did you mean something like this.
I'm using iOS 5.0.1, and Sencha Touch 2-rc1. I have a search input field where the focus event is getting triggered, as well as the submit event when I press 'Search' on the on-screen keyboard. The blur event doesn't get triggered when I expect it to, which would be when the 'Done' key is pressed, or the viewable area is tapped.
Note that the blur event IS getting triggered on my laptop in Chrome.
Not every element is focusable. At least <div> is not.
onblur is not firing because when a user taps on a div element, the focus doesn't go to the <div>.
Based on this post:
http://snook.ca/archives/accessibility_and_usability/elements_focusable_with_tabindex
tabindex on the correct div element can make a div focusable.
This is likely to be related to the event not "bubbling" up through the DOM. Or perhaps the code you've used includes an event.preventDefault(), but that would have killed more than just blur. I've also had this issue with clicking away from items which appear via javascript.
http://www.quirksmode.org/dom/events/blurfocus.html