Question

我之前尝试过问这个问题，但我问的方式太混乱了，以至于我没有得到任何帮助。我最初认为在更新子组件时，React会责怪我的touchmove事件停火。我现在很确定它是Chartist.js库，或者可能是我将图表包装到反应组件中的方式，即停止操作。

我没有在我的问题上闲聊，而是创建了两个JSfiddles。一个显示你可以创建一个React滑块，可以连续更新它的值，无论是从mousemove还是touchmove调用它。

http://jsfiddle.net/higginsrob/uf6keps2/

// please follow the link for full example

第二个小提琴实现了我对Chartist的反应包装，以及我如何使用它的简化示例。在图表上单击/拖动时，它将选择当前x值处的数据点。这可以通过鼠标正常工作，但是在移动触摸设备（或Chrome的移动模拟器）上尝试它只会触发几次，并且只更新一次图表。

http://jsfiddle.net/higginsrob/Lpcg1c6w/

// please follow the link for full example

感谢任何帮助！

Answer 1

好的，所以你需要在chartist图表前面放一个透明div来捕获mousedown / touchstart，mousemove / touchmove和mouseup / touchend事件。

工作示例： http://jsfiddle.net/higginsrob/jwhbzgrb/

// updated event functions: 

onTouchStart: function (evt) {
    evt.preventDefault();
    this.is_touch = (evt.touches);
    var node = evt.currentTarget.previousSibling;
    var grid = node.querySelector('.ct-grids');
    var bbox = grid.getBBox();
    this.columnwidth = bbox.width / this.props.data.length;
    this.offset = this.getScrollLeftOffset(node) + bbox.x + (this.columnwidth / 2);
    this.istouching = true;
    this.onTouchMove(evt);
}

onTouchMove: function (evt) {
    if(this.istouching){
        var x;
        if (this.is_touch) {
            if(evt.touches && evt.touches[0]){
                x = evt.touches[0].clientX - this.offset;
            }
        } else {
            x = evt.clientX - this.offset;
        }
        this.setState({
            index: Math.round(x / this.columnwidth)
        });
    }
}

onTouchEnd: function(evt){
    this.istouching = false;
}

// updated render function: 

render: function () {

    return React.DOM.div(
        {
            style: {
                position: "relative"
            }
        },

        ReactChartist({ ... your chartist chart here .... }),


        // this div sits in front of the chart and captures events

        React.DOM.div({
            onMouseDown: this.onTouchStart,
            onTouchStart: this.onTouchStart,
            onMouseMove: this.onTouchMove,
            onTouchMove: this.onTouchMove,
            onMouseUp: this.onTouchEnd,
            onTouchEnd: this.onTouchEnd,
            style: {
                position: "absolute",
                top: 0,
                left: 0,
                right: 0,
                bottom: 0
            }
        })
    );
}

React Chartist组件onTouchMove事件未触发

1 个答案: