Swiping the slide with mouse dragging triggers click event

[jiangfengming]

Describe the bug When using mouse to drag the slide, if the mouse is on <a> element, it will cause navigation.

To Reproduce

<hooper>
  <slide>
    <a href="https://www.example.com/">example.com</a>
  </slide>
  <slide>
    slide 2
  </slide>
</hooper>

Expected behavior Capture the click event and stopPropagation() and preventDefault().

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 76

[ismail9k]

Why do you want to add a link inside a slide if you don't want it to be clickable? The old behavior of Hooper was to prevent default actions, however, this leads to the exact opposite issue; elements inside hooper are not clickable anymore see #106.

[jiangfengming]

If the user's intent is to switch the slide ( dragging and move), then after mouse up, the click event should be prevented.

if (isDragging && mouseMoveDistance > THRESHOLD) {
  preventClickEvent = true
}

mouseMoveDistance is horizontal distance by default, or vertical distance if vertical prop is true.

THRESHOLD is a small number, maybe around 5px, to allow unconscious mouse movement between mouse down and mouse up.

If the user's intent is to click an element (mouse down and mouse up, no movement), then the click should be triggered normally.

[webkitten]

what is the state of current issue?

[donni106]

Seems to be the same like issue #141. @jiangfengming do you have a full component example please?

[donni106]

I found a solution to disable the <nuxt-link> click while dragging with setting a boolean flag on before and after event:

<hooper
  ref="hooper"
  @beforeSlide="disableLink"
  @afterSlide="enableLink"
>
...

...
data() {
  return {
    hooperActive: false,
  };
},
methods: {
  disableLink() {
    this.hooperActive = true;
  },
  enableLink() {
    this.hooperActive = false;
  },
},
...

The link itself sets the click event depending on that flag:

<nuxt-link to="/" :event="hooperActive ? '' : 'click'">

[roennow]

Just ran in to this. My solution was to see if the isSliding flag is true and if so prevent the default behaviour of the link. example:

<hooper ref="carousel">
  <slide>
    <a href="https://www.example.com/" @click="clickSlide">example.com</a>
  </slide>
  <slide>
    slide 2
  </slide>
</hooper>

then add a method

clickSlide (event) {
  if (this.$refs.carousel.isSliding) {
    event.preventDefault()
  }
}