react-draggable 拖拽时会触发子元素点击事件
时间: 2023-08-06 09:07:03 浏览: 190
`react-draggable` 是一个非常好用的拖拽库,但是在拖拽过程中会触发子元素的点击事件,这是因为默认情况下 `react-draggable` 使用的是绝对定位,导致其覆盖了子元素,从而阻止了子元素的点击事件冒泡到父元素。
解决这个问题的方法是给 `react-draggable` 的 `handle` 属性设置一个值,这个值应该是可以响应点击事件的元素。例如,可以将 `handle` 属性设置为一个 `div` 元素,这个 `div` 元素用来触发拖拽事件,而其它子元素则不会触发拖拽事件。
下面是一个简单的示例代码:
```jsx
import React from 'react';
import Draggable from 'react-draggable';
const Example = () => {
const handleDrag = () => {
console.log('dragging...');
};
return (
<Draggable handle=".handle" onDrag={handleDrag}>
<div className="box">
<div className="handle">拖拽我</div>
<div className="content">我不会触发拖拽事件</div>
</div>
</Draggable>
);
};
```
在上面的代码中,我们给 `Draggable` 组件的 `handle` 属性设置了值为 `.handle`,这意味着只有拖拽 `.handle` 元素时才会触发拖拽事件。`.content` 元素不会触发拖拽事件。这样就可以避免在拖拽过程中触发子元素的点击事件了。