React-slick: Drag Auto Trigger Click Event

[xunkaisummer]

Actively trigger a click event which I add on the img element when I drag the img element. I hope It can not trigger a click event when I drag, but the distance of dragging is small

[VadimSvirdoff]

Hi, @xunkaisummer, could you attach code snippet or video with reproduced problem.

[reeezaaa]

hi @xunkaisummer you can set onClick and onMouseDown to div
live example:
codesandbox
or

  <div
      key={index}
      onMouseDown={(e) => handleOnMouseDown(e)}
      onClick={(e) => handleOnClick(e)}
  >

  const [ClientXonMouseDown, setClientXonMouseDown] = useState();
  const [ClientYonMouseDown, setClientYonMouseDown] = useState();
  const handleOnMouseDown = (e) => {
    e.preventDefault();
    setClientXonMouseDown(e.clientX);
    setClientYonMouseDown(e.clientY);
  };

  const handleOnClick = (e) => {
    e.stopPropagation();
    if (ClientXonMouseDown !== e.clientX || ClientYonMouseDown !== e.clientY) {
      e.preventDefault();
    }
  }; 

[ljc-dev]

hi @xunkaisummer , I was working on the same issue tonight and I think I found a solution using built-in slick functions. I had the same idea as @artuswo443 on issue #1956 to use onSwipe to detect when the swipe start. But there's no swipe end function. What I found that worked for me was to use afterChange to detect end of swipe.

Result here (twitter post)

Code:

  let isSwiping = false

  function updateSwipeState(state) {
    isSwiping = state
  }

  function handleClick() {
    if (isSwiping) {
      return
    }
    // do something onClick
  }

  return (
      <Slider  afterChange={ () => updateSwipeState(false) } onSwipe: { () => updateSwipeState(true) }>
        {
          posts.map(p => getBlogComponent(p, handleClick))
        }
      </Slider>
    </div>
  )

1. create a isSwiping boolean.
2. onSwipe updates isSwiping to true
3. afterChange updates isSwiping to false
4. in onClick add a condition to return if isSwiping is true

[mihanizm56]

seems like the lib need one more method processing this (actualy very popular) case =)