Please be cautious with testing click events if you have tap-to-click turned on on your macbook.
DOM events
A
click event comprises a
mousedown and a
mouseup event.
Click event is a process of press and release on an element.
Mousedown signifies the start of a click event.
Mouseup signifies the end of a click event.
 |
Mac Tap to click |
If you set your trackpad to have 'tap to click' on, please be cautious about click event testing.
A tap to click works as a click when you quickly tap on the track pad and release. I am not sure about the threshold time which qualifies a tap as a tap-to-click. However, if you touch and lift your finger for a millisecond too long, the tap-to-click won't function as a click event.
Thus, at a split of a second, a tap-to-click causes click, mousedown and mousedown events to fire.
Bug
I encountered a bug today where a dropdown list listened for a blur event to close a dropdown list and listened for a click event to select a list item.
The problem happened when I clicked on a list item, blur event was fired and thus closed my dropdown list before a click event could have been fired.
A manual click on track pad or a mouse click tends to be slower than a tap-to-click.
It works if I tap-to-click on the trackpad because click event, mousedown and mouseup events are fired fast enough before the dropdown list closes.
Source code on GitHub
<div role='Listbox' (keyup)='handleKeyUpEvent($event)' (keydown)='handleKeyDownEvent($event)'>
<span tabIndex='1' (blur)='listBlur()' (click)='listActivated()'
(click)='toggleDropDownList()'
[ngClass]='titleClasses'>{{title || 'DropDownList'}}</span>
<ul role='List' [ngClass]='listClasses'>
<li
role='Listitem'
(click)='selectItem(item)'
*ngFor='let item of listItems; let i = index'
[class.selected]='i === activeIndex'
[selected]='i === activeIndex'>{{i + 1}}: {{item.data}}
</li>
</ul>
<span [ngClass]='clearClasses' (click)='deselectItem()'>Clear</span>
</div>
GitHub page that uses the dropdown list.
Suggestion:
Manually click on your Macbook trackpad to make sure your webpage works as intended.
Thanks for reading!
Jun
Comments
Post a Comment