Оповещение о 2x проведите вниз - PullRequest
0 голосов
/ 27 января 2019

Я хочу предупредить сообщение, когда пользователь прокручивает вверх (смахивает вниз) определенное значение px или 2 раза подряд на мобильном устройстве.

У меня уже есть работающее решение с jquery mobile, но оно очень чувствительное.Такое ощущение, что это срабатывает, как только я прокручиваю вверх (проведу вниз) несколько пикселей.Общая цель - найти что-то похожее на триггер, когда пользователь пытается закрыть вкладку / браузер с помощью мыши на рабочем столе.Поэтому я подумал, что если пользователь прокручивает несколько конкретных значений пикселов или x раз, это признак того, что что-то должно произойти, или он покидает сайт.

Я пробовал это с помощью jquery mobile, вот мой кодовый указатель: https://codepen.io/maximilian-neuse/pen/KJzQzM

$.support.touch = true;
var supportTouch = $.support.touch,
  scrollEvent = "touchmove scroll",
  touchStartEvent = supportTouch ? "touchstart" : "mousedown",
  touchStopEvent = supportTouch ? "touchend" : "mouseup",
  touchMoveEvent = supportTouch ? "touchmove" : "mousemove";
$.event.special.swipeupdown = {
  setup: function() {
    var thisObject = this;
    var $this = $(thisObject);
    $this.bind(touchStartEvent, function(event) {
      var data = event.originalEvent.touches
          ? event.originalEvent.touches[0]
          : event,
        start = {
          time: new Date().getTime(),
          coords: [data.pageX, data.pageY],
          origin: $(event.target)
        },
        stop;

      function moveHandler(event) {
        if (!start) {
          return;
        }
        var data = event.originalEvent.touches
          ? event.originalEvent.touches[0]
          : event;
        stop = {
          time: new Date().getTime(),
          coords: [data.pageX, data.pageY]
        };

        // prevent scrolling
        if (Math.abs(start.coords[1] - stop.coords[1]) > 10) {
          event.preventDefault();
        }
      }
      $this
        .bind(touchMoveEvent, moveHandler)
        .one(touchStopEvent, function(event) {
          $this.unbind(touchMoveEvent, moveHandler);
          if (start && stop) {
            if (
              stop.time - start.time < 2000 &&
              Math.abs(start.coords[1] - stop.coords[1]) > 10 &&
              Math.abs(start.coords[0] - stop.coords[0]) < 400
            ) {
              start.origin
                .trigger("swipeupdown")
                .trigger(
                  start.coords[1] > stop.coords[1] ? "swipeup" : "swipedown"
                );
            }
          }
          start = stop = undefined;
        });
    });
  }
};

$.each(
  {
    swipedown: "swipeupdown",
    swipeup: "swipeupdown"
  },
  function(event, sourceEvent) {
    $.event.special[event] = {
      setup: function() {
        $(this).bind(sourceEvent, $.noop);
      }
    };
  }
);

$("body").on("swipedown", function() {
  if (popupCounter < 1) {
    alert("dont leave!");
  }
  popupCounter++;
});

Итак, как я могу сделать его менее чувствительным?Или есть лучшее решение для запуска такого действия?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...