#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

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