How do I extend HTML element

[dexbol]

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.

[alitavector]

Have you tried adding the libraries that remove 300ms delay?

[alitavector]

FastClick libraries

[dexbol]

@alitavector Thank you. I considered the library. It is my alternative.

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

[dexbol]

@sebmarkbage Thanks for your explanation.

[kevinSuttle]

@sebmarkbage: Forgive my need for clarity, but by "extend" are you also inferring "override" or "add new" events?

I saw a perfect candidate for this today.
https://twitter.com/rikarends/status/680005032641753088

[kevinSuttle]

@sebmarkbage Could/should the Sythentic Event System be modified to (what's the opposite of "hoist") scope? https://facebook.github.io/react/docs/events.html

[kevinSuttle]

cc: @gaearon @petehunt

[nhunzaker]

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