Как НЕ щелкать мышью по href при перетаскивании в iScroll

Question

У меня включен iScroll на моей странице.

Обратите внимание, что изображения в скроллере являются ссылками (так что откроется всплывающее окно для большего изображения, вы знаете, сделка). НО одна из приятных особенностей iScroll заключается в том, что вы можете перетаскивать мышь для прокрутки. НО теперь, когда кто-то перетаскивает его, он автоматически открывает изображение вместо прокрутки полосы. Есть ли обходной путь?

Answer 1

Я бы сказал, добавить класс к каждому якору во время перетаскивания скроллера. Например, добавьте имя класса "перетаскивания" к каждой привязке при перетаскивании, затем удалите класс, когда перетаскивание останавливается.

Это означает, что вы можете добавить warnDefault к любой ссылке, которая имеет класс "перетаскивания". Что-то вроде:

    myScroll1 = new iScroll('scroll1', {
        snap: 'li',
        momentum: false,
        hScrollbar: false,
        onScrollStart: function () {
            $('div#iscroll1 a').addClass("dragging");
        },
        onScrollEnd: function () {
            $('div#iscroll1 a').removeClass("dragging");
            document.querySelector('.indicator > li.active').className = '';
            document.querySelector('.indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
        }
    });
    $('.dragging').click(function (e) {
        e.preventDefault();
    }

Это, однако, непроверенный код, поэтому вам может потребоваться усовершенствовать селекторы.

Answer 2

Я создал патч для iScroll, который исправляет эту проблему. Вы можете увидеть разницу здесь: https://github.com/zmathew/iscroll/commit/3d77681a9f4b3a6b5a7579df4443bc53356d5584

В качестве альтернативы вы можете получить полную исправленную версию iScroll отсюда: https://github.com/zmathew/iscroll/tree/prevent-scroll-clicks

Answer 3

Решение не работает для меня, вот мое простое решение. При перетаскивании установите перетаскивание на true, если нет - на false. Если щелкнуть при перетаскивании, игнорируйте его.

 var myScroll = new iScroll("scroll1", { onBeforeScrollMove: function () {
            window.dragging = true;
        },
            onScrollEnd: function () {
                //had to use a timeout here because without it it would fire on links at the end of the drag / dragging slowly
                setTimeout(function () { 
                    window.dragging = false;
                }, 10);
            }

        });

и на якорях проверяют на предмет перетаскивания

    $(".myanchors a").click(function () { 
        if (window.dragging) {
            return false;
        }
    });

Answer 4

Здравствуйте, здесь модифицированная версия iScroll 4.2.5 для загрузки

iScroll 4.2.5 + исправление щелчка

onBeforeScrollStart: function (e) {if(!hasTouch) e.preventDefault();},