Как избежать случайных нажатий при перетаскивании? - PullRequest
Новая
       9

Как избежать случайных нажатий при перетаскивании?

0 голосов
/ 17 января 2020

У меня есть слайдер, построенный с использованием 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>


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

Ответы [ 2 ]

0 голосов
/ 30 марта 2020

У меня тоже были проблемы с этим.

То, что я сделал, - отслеживал движение между событием mousedown и событием mouseup. Я считаю каждое движение мыши и просто добавляю его к счетчику.

При каждом mousedown я сбрасываю счетчик на 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 голосов
/ 17 января 2020 

$('.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: Как различить guish щелчок мышью и перетаскивание

...