[Bug] tap event will be triggered when swipe
Open
Nobody has claimed this yet.
bug
- Dominant language
- TypeScript
- Stars
- 263
- Forks
- 50
- Avg merge
- 1d 8h
- Merged PRs (30d)
- 16
Description
Version
no
Link to Minimal Reproduction
no
Steps to Reproduce
import { default as VChart } from '../../../src/index';
const spec = {
type: 'line',
data: {
values: [
{
time: '2:00',
value: 8
},
{
time: '4:00',
value: 9
},
{
time: '6:00',
value: 11
},
{
time: '8:00',
value: 14
},
{
time: '10:00',
value: 16
},
{
time: '12:00',
value: 17
},
{
time: '14:00',
value: 17
},
{
time: '16:00',
value: 16
},
{
time: '18:00',
value: 15
}
]
},
xField: 'time',
yField: 'value'
};
const chartContainer = document.getElementById('chart');
new Array(10).fill(0).forEach((entry, index) => {
const dom = document.createElement('div');
dom.style.width = '100%';
dom.style.height = '400px';
dom.style.background = 'pink';
dom.style.marginBottom = '10px';
dom.style.position = 'relative';
chartContainer?.appendChild(dom);
const textContainer = document.createElement('div');
textContainer.style.position = 'absolute';
textContainer.style.top = '100px';
textContainer.style.left = '80px';
textContainer.style.fontSize = '12px';
textContainer.style.color = 'red';
textContainer.style.pointerEvents = 'none';
textContainer.style.maxHeight = '200px';
textContainer.innerText = '这是一个空的内容';
dom.appendChild(textContainer);
const vchart1 = new VChart(
{
...spec,
title: {
text: `chart-${index}`
}
},
{ dom: dom, mode: 'mobile-browser', supportsTouchEvents: false }
);
vchart1.renderSync();
vchart1.on('tap', e => {
console.log('tap event', e, `chart ${index}`);
textContainer.innerText = (textContainer.innerText || '') + `\ntap 事件触发${index}`;
});
vchart1.on('pointerdown', e => {
console.log('pointerdown event', e, `chart ${index}`);
textContainer.innerText = (textContainer.innerText || '') + `\npointerdown 事件触发${index}`;
});
vchart1.on('pointerup', e => {
console.log('pointerup event', e, `chart ${index}`);
textContainer.innerText = (textContainer.innerText || '') + `\npointerup 事件触发${index}`;
});
vchart1.on('click', e => {
console.log('click event', e, `chart ${index}`);
textContainer.innerText = (textContainer.innerText || '') + `\nclick 事件触发${index}`;
});
vchart1.on('press', e => {
console.log('press event', e, `chart ${index}`);
textContainer.innerText = (textContainer.innerText || '') + `\npress 事件触发${index}`;
});
vchart1.on('touchend', e => {
console.log('touchend event', e, `chart ${index}`);
textContainer.innerText = (textContainer.innerText || '') + `\ntouchend 事件触发${index}`;
});
// dom.addEventListener('tap', e => {
// console.log('tap event', e, `chart ${index}`);
// textContainer.innerText = (textContainer.innerText || '') + `\ntap 事件触发${index}`;
// });
// dom.addEventListener('pointerdown', e => {
// console.log('pointerdown event', e, `chart ${index}`);
// textContainer.innerText = (textContainer.innerText || '') + `\npointerdown 事件触发${index}`;
// });
// dom.addEventListener('pointerup', e => {
// console.log('pointerup event', e, `chart ${index}`);
// textContainer.innerText = (textContainer.innerText || '') + `\npointerup 事件触发${index}`;
// });
// dom.addEventListener('click', e => {
// console.log('click event', e, `chart ${index}`);
// textContainer.innerText = (textContainer.innerText || '') + `\nclick 事件触发${index}`;
// });
// dom.addEventListener('press', e => {
// console.log('press event', e, `chart ${index}`);
// textContainer.innerText = (textContainer.innerText || '') + `\npress 事件触发${index}`;
// });
// dom.addEventListener('touchend', e => {
// console.log('touchend event', e, `chart ${index}`);
// textContainer.innerText = (textContainer.innerText || '') + `\ntouchend 事件触发${index}`;
// });
});
Current Behavior
按压图表区域的时候,快速左右扫动
问题1:
- 上诉交互不应该触发
tap事件 - 现在
packages/vrender-core/src/event/event-manager.ts和packages/vrender-kits/src/event/extension/gesture.ts都会抛tap事件命名冲突了
Expected Behavior
不触发tap
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by reproducing the swipe interaction from the issue example in mobile-browser mode. Read packages/vrender-core/src/event/event-manager.ts and packages/vrender-kits/src/event/extension/gesture.ts to trace the tap handling and naming overlap. Done means a quick horizontal swipe over the chart does not emit a tap event.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 45/100