Mouseup events are not working inside Swiper

by

I’m using Swiper to show some slides, and I have some events that run on mouseup, but they are not working with Swiper. When I click the swiper container nothing happens.

You can see it in this example, the alert doesn’t work:

document.body.addEventListener('mouseup', () => { alert('mouseup'); });

const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  pagination: {
    el: '.swiper-pagination',
  },
});
.swiper-container {
  width: 80vw;
  height: 80vh;
}

html, body {
width: 100%;
  height: 100%;
}

#m {
  height: 400px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>

<div id="m">
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</div>

I think it does it to avoid events interfering with the Swipe, but if the user doesn’t swipe, just clicks, I would like to trigger my events.

How can I do that?

3 thoughts on “Mouseup events are not working inside Swiper”

  1. Swiper does that on purpose to avoid events from messing up the swipe. One way to change this behavior is to trick it to think that your elements are form elements. Internally it does a check and if the target is a form element it allows the click.

    You can change Swipers init function to set the form elements data:

    const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
  this.touchEventsData.formElements = '*';
  i.call(this);
};

    prevent default

    With that it will no longer lock mouseup events.

    The following example shows an event with alert, it works but causes ux problems with the swiping.

    document.body.addEventListener('mouseup', () => { alert('mouseup'); });

const i = Swiper.prototype.init;
Swiper.prototype.init = function () {
  this.touchEventsData.formElements = '*';
  i.call(this);
};

const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  pagination: {
    el: '.swiper-pagination',
  },
});
    .swiper-container {
  width: 80vw;
  height: 80vh;
}

html, body {
width: 100%;
  height: 100%;
}

#m {
  height: 400px;
}
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/css/swiper.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.3.2/js/swiper.min.js"></script>

<div id="m">
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</div>
    Reply

  3. Update Swiper and add touchStartPreventDefault: true in swiper options

    document.body.addEventListener('mouseup', () => { alert('mouseup'); });

const swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  touchStartPreventDefault: false,
  pagination: {
    el: '.swiper-pagination',
  },
});
    .swiper-container {
  width: 80vw;
  height: 80vh;
}

html, body {
width: 100%;
  height: 100%;
}

#m {
  height: 400px;
}
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

<div id="m">
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>

    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>
</div>
    Reply

Leave a Comment