Opened 8 years ago
Closed 7 years ago
#15913 closed enhancement (fixed)
Enhance touch feedback of dojox/mobile/Button
Reported by: | Eric Durocher | Owned by: | Patrick Ruzand |
---|---|---|---|
Priority: | blocker | Milestone: | 1.10 |
Component: | DojoX Mobile | Version: | 1.8.0 |
Keywords: | Cc: | Sebastien Pereira | |
Blocked By: | Blocking: |
Description
The current feedback of a dojox/mobile/Button when you touch it on a mobile is:
- touch down -> nothing happens
- touch release -> button gets selected and stays selected for 1 sec (customizable through the delay property).
This is not optimal since it gives the impression that nothing has happened on touch down. Furthermore, the selection delay does not seem very useful since, most of the time, an action has already taken place as soon as the user released his finger.
In addition, this is different from the usual behavior of a Button, which is:
- touch down -> button gets selected
- touch release - buttons gets deselected
A proposed way to enhance the behavior is to:
- in all mbl*ButtonSelected rules in the theme CSS, add a mbl*Button:active selector, so the selected rule also applies when the button is pressed
- set the delay to 0 by default
Attachments (2)
Change History (19)
Changed 8 years ago by
Attachment: | test_Button_fast.html added |
---|
Changed 8 years ago by
Attachment: | test_Button_fast_touch.html added |
---|
Another workaround for fast mobile buttons using touch events
comment:1 Changed 8 years ago by
It seems the CSS solution using the :active pseudo-class does not work on Android (at least some versions) because :active stays when you move the finger out of the button and release...
So I attached a different solution which extends the Button class to handle touch (or mouse) events to "press" the button and fire synthetic click events.
comment:2 Changed 8 years ago by
Does :hover work?
The JS solution you are describing sounds like what dijit/_CssStateMixin does already, although it's probably more code and functionality than you want.
comment:3 Changed 8 years ago by
A solution based on Eric's proposal test_Button_fast_touch.html is provided in pull request https://github.com/dojo/dojox/pull/9
comment:4 Changed 8 years ago by
Owner: | changed from Eric Durocher to Patrick Ruzand |
---|---|
Priority: | undecided → high |
Status: | new → assigned |
comment:5 Changed 8 years ago by
Milestone: | tbd → 1.10 |
---|---|
Priority: | high → blocker |
This has to be in 1.10 & 2.0.
comment:7 Changed 7 years ago by
Resolution: | → fixed |
---|---|
Status: | assigned → closed |
comment:8 Changed 7 years ago by
Cc: | Sebastien Pereira added |
---|
comment:9 Changed 7 years ago by
seb, concerning the changes in dojo/touch to add support for dojoClick's "useTarget" value, I would think it would be nice to also add the corresponding documentation (API doc and reference guide).
comment:10 follow-up: 15 Changed 7 years ago by
There is a side effect to this fix, that can be reproduced using the test page dojox/mobile/tests/test_FormControls.html (reproduced with iOS 5.1.1 (iPad 1), iOS 7.0.6 (iPhone 5) and Android 4.2.2 (Samsung Galaxy 4)): when the page is displayed, use each control (buttons, checkbox, toggle button, switch, radio button, slider) and then click the combo box: it is impossible to select an entry in the combo box.
Debugging on iOS 7.0.6 shows that the issue occurs line 108 of dojo/touch.js:
clickTracker = dom.isDescendant(win.doc.elementFromPoint((e.changedTouches ? e.changedTouches[0].pageX : e.clientX),(e.changedTouches ? e.changedTouches[0].pageY : e.clientY)),clickTarget);
Apparently, on this version of iOS, elementFromPoint needs the coordinates returned by e.changedTouches[0].clientX and e.changedTouches[0].clientY to return the element on which the last event occurred.
comment:11 Changed 7 years ago by
Resolution: | fixed |
---|---|
Status: | closed → reopened |
comment:12 Changed 7 years ago by
With iPad Air iOS 7.1.1, I reproduce with 1.10b1, but I don't reproduce anymore with a fresh update of dojo/dojox/dijit today. The code for the clickTracker in dojo/touch didn't change, so apparently the faulty code was elsewhere and got fixed?
comment:13 Changed 7 years ago by
I'm still reproducing with iphone 5 iOS 7.0.6 with a fresh update of dojo/dojox/dijit.
comment:14 Changed 7 years ago by
Reproduced also on android:
- open dojox/mobile/tests/test_forControls.html
- click on a button (don't do any other action before)
- try to scroll the view: nothing happens
- open the Combobox
- try to select an entry: nothing happens
This is a side effect of dojo/touch.js in https://github.com/dojo/dojo/blob/7ec319d1d152d54e3ab511be8089c7739fd763ab/touch.js#L69
Handlers that are created in doClick
scope refer to the variable useTarget
which is declared in doClick
. These handlers are create on doClick
firt call: value of useTarget
is the value from the first call and never changes for subsequent calls.
Solution is to declare and initialize useTarget=false
here https://github.com/dojo/dojo/blob/7ec319d1d152d54e3ab511be8089c7739fd763ab/touch.js#L14.
comment:15 Changed 7 years ago by
Replying to sbrunot:
Apparently, on this version of iOS, elementFromPoint needs the coordinates returned by e.changedTouches[0].clientX and e.changedTouches[0].clientY to return the element on which the last event occurred.
Indeed, e.changedTouches[0].pageX
should be replaced by e.changedTouches[0].pageX - win.global.pageXOffset
, otherwise node.elementFromPoint() won't return the pointed element when the viewport is scrolled.
comment:16 Changed 7 years ago by
Fixed in dojo: https://github.com/dojo/dojo/commit/dd9f93a1d430fd0074e9e795091b5d61274cee35 dojox/mobile test updated in: https://github.com/dojo/dojox/commit/0521f955a2310b142711d8a78055759006547f48
comment:17 Changed 7 years ago by
Resolution: | → fixed |
---|---|
Status: | reopened → closed |
Modified test case using the workaround for better mobile Button feedback