Menu icon Foundation

My Posts

No Content

My Comments

wijnaldumwilliam commented on baglio's post over 3 years

 
Desktop (regular monitor, Linux):

✓ Firefox
✓ Chrome

Touchscreen Laptop (Win8)

✓ Firefox

"ontouchstart" in window === false


✗Chrome

"ontouchstart" in window === true



On Chrome and Firefox I can open it with touch. Perhaps there's a way to check for lack of a mouse, rather than presence of touch? For example, when the page first loads, we add a listener for mousemove. If the mouse moves once, we remove the handler and remember that a mouse is present. I don't know of a device with a mouse and touchscreen that doesn't generate "click" events for a tap on the screen.
Note: that mousedown/up/move isn't triggered on touch devices usually; just click. We can safely bind events to those events and touchstart/drag/end. There may be some exceptions, which is why we need throttling in many areas of the library. We could pull a debounce method from underscore/lodash.
 
Ex:
 
<div class="ui dropdown"> <div class="text">File</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item">New</div> <div class="item"> <span class="description">ctrl + o</span> Open... </div> <div class="item"> <span class="description">ctrl + s</span> Save as... </div> <div class="item"> <span class="description">ctrl + r</span> Rename </div> <div class="item">Make a copy</div> <div class="item"> <i class="folder icon"></i> Move to folder </div> <div class="item"> <i class="trash icon"></i> Move to trash </div> <div class="divider"></div> <div class="item">Download As...</div> <div class="item"> <i class="dropdown icon"></i> Publish To Web <div class="menu"> <div class="item">Google Docs</div> <div class="item">Google Drive</div> <div class="item">Dropbox</div> <div class="item">Adobe Creative Cloud</div> <div class="item">Private FTP</div> <div class="item">Another Service...</div> </div> </div> <div class="item">E-mail Collaborators</div> </div> </div>

Posts Followed


Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on baglio's post over 3 years

 
Desktop (regular monitor, Linux):

✓ Firefox
✓ Chrome

Touchscreen Laptop (Win8)

✓ Firefox

"ontouchstart" in window === false


✗Chrome

"ontouchstart" in window === true



On Chrome and Firefox I can open it with touch. Perhaps there's a way to check for lack of a mouse, rather than presence of touch? For example, when the page first loads, we add a listener for mousemove. If the mouse moves once, we remove the handler and remember that a mouse is present. I don't know of a device with a mouse and touchscreen that doesn't generate "click" events for a tap on the screen.
Note: that mousedown/up/move isn't triggered on touch devices usually; just click. We can safely bind events to those events and touchstart/drag/end. There may be some exceptions, which is why we need throttling in many areas of the library. We could pull a debounce method from underscore/lodash.
 
Ex:
 
<div class="ui dropdown"> <div class="text">File</div> <i class="dropdown icon"></i> <div class="menu"> <div class="item">New</div> <div class="item"> <span class="description">ctrl + o</span> Open... </div> <div class="item"> <span class="description">ctrl + s</span> Save as... </div> <div class="item"> <span class="description">ctrl + r</span> Rename </div> <div class="item">Make a copy</div> <div class="item"> <i class="folder icon"></i> Move to folder </div> <div class="item"> <i class="trash icon"></i> Move to trash </div> <div class="divider"></div> <div class="item">Download As...</div> <div class="item"> <i class="dropdown icon"></i> Publish To Web <div class="menu"> <div class="item">Google Docs</div> <div class="item">Google Drive</div> <div class="item">Dropbox</div> <div class="item">Adobe Creative Cloud</div> <div class="item">Private FTP</div> <div class="item">Another Service...</div> </div> </div> <div class="item">E-mail Collaborators</div> </div> </div>

Posts Followed


Following

  • No Content

Followers

  • No Content