拖动时如何避免意外点击事件？

Question

我有一个使用 Slick 构建的滑块，每张幻灯片都有一个 data 属性，当单击幻灯片时，该属性被复制到输入字段，然后提交具有该输入字段值的表单。

问题是，如果我有多个幻灯片，“也许通过从上面的选择框中选择 Kissen=>Sitz 然后尝试拖动幻灯片滚动浏览它们，这可能会导致点击事件（大多数情况下会发生，但并非总是如此）所以我想知道是否有一种简单的方法可以防止意外点击？

<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/

Answer 1

$('.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);
  });
});

参考： 如何区分鼠标“点击”和“拖动”

Answer 2

我也遇到了这个问题。

我所做的是跟踪 mousedown 事件和 mouseup 事件之间是否有移动。 我计算鼠标的每一次移动，然后将其添加到计数器中。

每次鼠标按下，我将计数器重置为 0。

如果移动太大，则不视为点击。

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
})

`