How to avoid accidental click events while dragging?

Question

I have a slider built using Slick, each slide has a data attribute that get copied to an input field when a slide get clicked then the form with the value on that input field get submited.

The problem is that if i have a a multiple slides "maybe by choosing Kissen=>Sitz from the select boxes above then try to drag the slides to scroll through them that may cause a click event (that happens most of the time but not always) so im wondering if there is an easy way to prevent that accidental clicks?

<form name="product_select" id="product_select_form" action="conctact-details/" method="post">
<input type="text" id="product_id" name="product_id">
</form>
<div class="slick-slider">    
    <div class="slick-slide" data-product-id="1" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image1.png">Orthopädisches Sitzkissen</div>
    <div class="slick-slide" data-product-id="2" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image2.png">Hämorrhoiden Kissen</div>
    <div class="slick-slide" data-product-id="3" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image3.png">Rückenkissen</div>
    <div class="slick-slide" data-product-id="4" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image4.png">Comfort Cushion</div>
    <div class="slick-slide" data-product-id="5" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image5.png">All-in-one</div>
    <div class="slick-slide" data-product-id="6" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image6.png">Aufstehkissen</div>
    <div class="slick-slide" data-product-id="7" data-product-cat="1"><img src="https://www.solodev.com/assets/carousel/image7.png">Wedge Cushion</div>
</div>


$(document).ready(function() {
  $('.slick-slider').hide();
  $('.slick-slider').slick({
    dots: true,
    infinite: false,
    speed: 300,
    slidesToShow: 4,
    slidesToScroll: 4,
    responsive: [{
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
          slidesToScroll: 3
        }
      },
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 2,
          slidesToScroll: 2
        }
      },
      {
        breakpoint: 500,
        settings: {
          slidesToShow: 1,
          slidesToScroll: 1
        }
      }
    ]
  });
});


$(".slick-slide").click(function() {
  $product_id = $(this).data('product-id');
  $('#product_id').val($product_id);
  $('#product_select_form').submit();

https://jsfiddle.net/arabtornado/gjxnmk4p/198/

score 2 · Answer 1 · answered Jan 17 '20 at 20:26

2


$('.slick-slide').on('mousedown', function (evt) {
  $('.slick-slide').on('mouseup mousemove', function handler(evt) {
    if (evt.type === 'mouseup') {
      $product_id = $(this).data('product-id');
       $('#product_select_form').submit();
       $('#product_id').val($product_id);
    }
    $('.slick-slide').off('mouseup mousemove', handler);
  });
});

Refrance: How to distinguish mouse "click" and "drag"

answered Jan 17 '20 at 20:26

Islam Mohamed

117
2
10

@RobertHarvey m not really familiar with JS but i guess it listen to mouseup mousedown and mousemove events so if you clicked the slide without moving your mouse the form will get submited and if you clicked it while moving your mouse then nothing will happen. – Islam Mohamed Jan 17 '20 at 20:38

score 0 · Answer 2 · answered Mar 30 '20 at 11:04

I also had trouble with this.

What I did was to track if there are movement between the mousedown event and the mouseup event. I count every movement of the mouse and just add it to a counter.

Every mousedown, I reset the counter to 0.

If the movement is too large, then it is not considered a click.

let dragmovement = 0;
$('#slick-selector').click(function(e){
    if(dragmovement <= 20){
        // proceed with click event if mouse movement is minimal
        // change constant depending on your level of tolerance 
        console.log("clicked, not dragged")
    }
})

$(".#slick-selector").mousedown(function(e){dragmovement = 0;
//onmousedown inside the element, set counter to 0

// start tracking mouse movement
    $(document).mousemove(function(){dragmovement++;})
    //even mouse movement outside the slick is tracked
    //every movement will add +1 to counter

}).mouseup(function(){
    $(document).unbind('mousemove')
// release mouse movement tracker
})

`

BTW, for my app, the value of tolerance is 7. That's the sweet spot. — esantos, Apr 01 '20 at 03:29

How to avoid accidental click events while dragging?

2 Answers2