Get #Amazon #Prime for this #holiday #amazonprime #christmas #2019

#html click event with tap-to-click on Mac

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
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