Javascript e、 setTimeout（）中的preventDefault（）

场景：移动-拖放-滚动控件容器

我有一个div，它包含一个拖放平铺数组。这些平铺水平溢出容器，我希望能够在容器中轻松滚动，但仍然使用拖放控件。我显然不希望容器在拖动其中一个控件时滚动；我也不希望控件阻止容器滚动

handleDragStart( e ) {
    this.dragStartTimeout = setTimeout(() => {
        this.setState({
            isDragging: true
        });
    }, 100)
}

handleDragMove( e ) {
    if ( this.isScrolling ) return false

    if ( !this.dragging ) {
        this.isScrolling = true;
        return false;
    }

    e.preventDefault();

    // scroll is now prevent and you can proceed with drag
}

要防止页面和容器滚动，可以在

touchstart

处理程序中使用

event.preventDefault

。这非常有效，拖动平铺不会滚动容器。问题是，当触摸可拖动的磁贴时，您现在无法滚动容器

为了解决这个问题，我尝试在组件

isDraging

中设置一个标志，该标志在

touchstart

处理程序中短暂延迟后设置为true，然后在翻转该标志后阻止默认操作。这是行不通的

尝试示例：

handleDrag( e ) {
    this.dragStartTimeout = setTimeout(() => {
        e.preventDefault();

        this.setState({
            isDragging: true
        });
    }, 50)
}

注意：

touchstart

事件在

componentDidMount

中绑定到可拖动元素的

ref

。之所以这样做，是因为在被动事件侦听器中无法

preventDefault

。React使用被动侦听器

有人知道这方面的工作吗

编辑-我想出来了。我还需要将

componentDidMount

方法中的

touchmove

事件添加到元素

ref

。完成后，我需要向组件添加一个

IsCrolling

标志。在

touchmove

处理程序中，如果

isDraging

为false，我添加了将

isScrolling

设置为true的逻辑。否则，如果滚动，则返回false；如果不滚动，则返回preventDefault；如果不滚动，则继续拖动操作

handleDragStart( e ) {
    this.dragStartTimeout = setTimeout(() => {
        this.setState({
            isDragging: true
        });
    }, 100)
}

handleDragMove( e ) {
    if ( this.isScrolling ) return false

    if ( !this.dragging ) {
        this.isScrolling = true;
        return false;
    }

    e.preventDefault();

    // scroll is now prevent and you can proceed with drag
}

---

将e.preventDefault置于超时内意味着调用太晚，handleDrag函数已在此阶段返回，但未阻止默认操作是的，我知道这一点。我更感兴趣的是解决所有问题。谢谢你。更多的方法是终止touchmove事件的滚动性质。抱歉，我只是先读了代码：在超时内点击e.preventDefault意味着调用它太晚了，handleDrag函数已经在这个阶段返回，但没有阻止默认操作是的，我知道这一点。我更感兴趣的是解决所有问题。谢谢你。这是一种消除touchmove事件滚动性质的方法。对不起，我只是先读了代码：p