React-slick: swipe vs select (question)

[edencorbin]

Plugin is working well, I'm trying to think of a good way to detect a click on an element vs a swipe/slide. Anything recommended for this? Currently I have a simple onClick={this.handleClick} however this will trigger on swipes/slides too.

[edencorbin]

Well I solved this, but please close after letting me know if I'm missing a better built in way. I did this as follows:

constructor(props) {
    super(props);
    this.state = {
        mouseX : 0,
        mouseY : 0
    }
}

handleMouseDown(e) = {
    this.setState({
        mouseX: e.nativeEvent.clientX,
        mouseY: e.nativeEvent.clientY,      
    })
}

handleMouseUp(e) = {
    var deltaX = Math.abs(e.nativeEvent.clientX - this.state.mouseX);
    var deltaY = Math.abs(e.nativeEvent.clientY - this.state.mouseY);
    var total=deltaX+deltaY;
    if (total<50){ //adjust for swipe vs click/tap
        //this is a click tap
    }
}

[afifkhaidir]

@edencorbin I faced that problem too, on which file did you add this?

constructor(props) {
    super(props);
    this.state = {
        mouseX : 0,
        mouseY : 0
    }
}

handleMouseDown(e) = {
    this.setState({
        mouseX: e.nativeEvent.clientX,
        mouseY: e.nativeEvent.clientY,      
    })
}

handleMouseUp(e) = {
    var deltaX = Math.abs(e.nativeEvent.clientX - this.state.mouseX);
    var deltaY = Math.abs(e.nativeEvent.clientY - this.state.mouseY);
    var total=deltaX+deltaY;
    if (total<50){ //adjust for swipe vs click/tap
        //this is a click tap
    }
}

[edencorbin]

I added it in my own navigation component. The component has a slider and a number of slide divs, the divs have onMouseDown and onMouseUp events linking to this code. It seems to work well.

[edencorbin]

I'll go ahead and close this as this solution seems to work well.

[luisfuertes]

@edencorbin how you know what item is clicked?

[edencorbin]

I'm going from memory here but you can put standard onMouseDown functionality on the element, you use this detection to determine click or swipe, if its a swipe, you ignore the onMouseDown function, otherwise, you allow it to execute...

[luisfuertes]

yes, i did it, thanks for answer!