When clicking on the text Click me, the onClick should be triggered with an event payload that e.target should be the inner element and the e.currentTarget should be the outer element, which means:
e.target.dataset.text should be outside
e.currentTarget.dataset.text should be inside
But if we move the inner element into a custom component:
It checks the data-goji-id and event timestamp on both target and currentTarget to detect whether the event should be stopped or not. For example, the inner element is clicked and calls stopPropagation, GojiJS would mark this data-goji-id as stopped, then the click handler of outer element trigger and GojiJS find the target.dataset.gojiId was marked and should not run callback anymore.
In this case, the issue described above causes the stopPropagation check to fail.
Temporary solution
We have to refactor the stopPropagation without event dataset dependency. A possible way is that if stopPropagation was called, GojiJS marks clicked element and its ancestors in the virtual dom tree as stoped, the following event on marked elements should be ignored.
Description
Consider this DOM tree:
When clicking on the text
Click me, theonClickshould be triggered with an event payload thate.targetshould be the inner element and thee.currentTargetshould be the outer element, which means:e.target.dataset.textshould beoutsidee.currentTarget.dataset.textshould beinsideBut if we move the inner element into a custom component:
The
e.targetbecame unavailable, and the dataset would always be empty.Reproduct link
Wechat: https://developers.weixin.qq.com/s/8SSh2Dmk79GI
QQ: missing-target-id-qq.zip
Reproduct steps
e.target.datasetoutside custom component is empty.Impact
GojiJS uses a hacky way to implement
stopPropagation: https://github.com/airbnb/goji-js/blob/8542d995892c30f02fe56967581942dd7f3d79fe/packages/core/src/events.ts#L31-L51It checks the
data-goji-idand event timestamp on bothtargetandcurrentTargetto detect whether the event should be stopped or not. For example, the inner element is clicked and callsstopPropagation, GojiJS would mark thisdata-goji-idasstopped, then the click handler of outer element trigger and GojiJS find thetarget.dataset.gojiIdwas marked and should not run callback anymore.In this case, the issue described above causes the
stopPropagationcheck to fail.Temporary solution
We have to refactor the
stopPropagationwithout event dataset dependency. A possible way is that ifstopPropagationwas called, GojiJS marks clicked element and its ancestors in the virtual dom tree asstoped, the following event on marked elements should be ignored.Platforms