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

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

问题是，如果我有一个多张幻灯片“可能通过从上面的选择框中选择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>

禁止：

---

我在这方面也遇到了麻烦

我所做的是跟踪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
})

让拖动运动=0；
$（“#光滑选择器”）。单击（函数（e）{
如果（dragmovement@RobertHarvey）我对JS不是很熟悉，但我猜它会听mouseup mousedown和mousemove事件，所以如果你在不移动鼠标的情况下单击幻灯片，表单将被提交，如果你在移动鼠标的时候单击它，那么什么也不会发生。顺便说一句，对于我的应用程序，容差的值是7。这是一个最佳点。

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

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