How do I extend HTML element

For 300ms click delay problem, I need attach four events to a element (onClick onTouchStart onTouchMove onTouchEnd) .It makes a bit tedious that there are so many elements to be clickable.

I can create a element, maybe named <Tap />, and receive property ontap and attache four events to the element to implement tap event. But I think it is bad for semantic, tap is a action.

So, the question is how I can extend HTML tag like div, a, em to support tap event, do you have any other ideas for this problem?

Thanks.

[sebmarkbage]

We don’t have an exposed way to extend the built-in event system. Essentially the problem is that these extensions wouldn’t be scoped to a component. It is a global set up and different components with different event systems.

This makes it difficult to share your components with the community. Different event systems may conflict in the same namespace. It will only work in your own controlled environment. We want to make it easy to share and reuse components without conflicts.

So to support this we would need to build it in a way that supports isolation.

This is the major benefit of a wrapper like <Tap /> since it does support component isolation by default.

[nhunzaker]

I think @sebmarkbage’s suggestion is valid: make a react component for the behavior and isolate it to that specific use case.