MouseEvent 和 TouchEvent 接口的 React Typescript 事件类型

typescript

React typescript 中的事件类型包括 MouseEvent 和 TouchEvent 接口。这些接口提供了处理鼠标和触摸事件的方法和属性。在本文中，我们将详细介绍这些事件类型，并提供一些示例代码帮助读者更好地理解它们的用法。

tsx
import React from 'react';
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log('Button clicked!');
  console.log('Client X:', event.clientX);
  console.log('Client Y:', event.clientY);
};
const App = () => {
  return (
    <div>
      <button onClick={handleClick}>Click me!</button>
    </div>
  );
};
export default App;

tsx
import React from 'react';
const handleTouchStart = (event: React.TouchEvent<HTMLDivElement>) => {
  console.log('Touch started!');
  console.log('Number of touches:', event.touches.length);
};
const App = () => {
  return (
    <div onTouchStart={handleTouchStart}>
      Touch me!
    </div>
  );
};
export default App;