Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] tap event will be triggered when swipe #1524

Open
xile611 opened this issue Oct 29, 2024 · 2 comments
Open

[Bug] tap event will be triggered when swipe #1524

xile611 opened this issue Oct 29, 2024 · 2 comments
Labels
bug Something isn't working

Comments

@xile611
Copy link
Contributor

xile611 commented Oct 29, 2024

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

按压图表区域的时候,快速左右扫动

img_v3_02g4_e09cf072-8185-4f01-b8bc-5b0f092fff5g

问题1:

  1. 上诉交互不应该触发tap事件
  2. 现在 packages/vrender-core/src/event/event-manager.tspackages/vrender-kits/src/event/extension/gesture.ts 都会抛 tap 事件命名冲突了

Expected Behavior

不触发tap

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

@xile611 xile611 added the bug Something isn't working label Oct 29, 2024
@xile611
Copy link
Contributor Author

xile611 commented Oct 29, 2024

935c78ae-db37-43a0-ab0e-12cc5d7af058

只是做了触发对象是否相同的判断,没有做位移的判断

可以对齐一下 hammerjs 的实现:
https://hammerjs.github.io/recognizer-tap/

@kkxxkk2019
Copy link
Contributor

目前 vrender 默认提供的 tap 事件可以理解为 click 的移动版本,没有做类似 HAMMAR 这种手势库精确的时间以及位移判断,之所以之前这么封装是为了满足一些场景的需求,对于手势交互有较高要求的是不适用的

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

2 participants