Как НЕ щелкать href при перетаскивании в iScroll

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

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


jquery drag hyperlink iscroll
person Don Munter    schedule 22.01.2012    source источник
comment
У меня есть ощущение, что размещение слушателя на ссылках - это путь. т.е. когда нажимается ссылка (что в данном случае происходит случайно), она предотвращает поведение по умолчанию, проверяет, прокручивают ли пользователи, и если не открывает ссылку в любом случае? Надеюсь, это вдохновит вас или кого-то еще. (Мне бы хотелось знать, если это не путь)   -  person Joep    schedule 23.01.2012
comment
Вам все еще нужен iScroll после выхода iOS5? Почему бы не использовать -webkit-overflow-scrolling: touch   -  person Matijs    schedule 23.01.2012
comment
Я хотел бы иметь одинаковую функциональность как на компьютере, так и на мобильном телефоне. Это единственное, что я знаю, это нормально. Согласно отзывам пользователей и т. д.   -  person Don Munter    schedule 23.01.2012

Ответы (4)


arrow_upward
3
arrow_downward

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

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

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

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

person Zappa    schedule 22.01.2012
comment
Также в качестве примечания. У меня не работает скроллер в IE8. Он умирает с ошибкой: Объект не поддерживает это свойство или метод Строка: 52 Символ: 5 Код: 0 - person Zappa; 23.01.2012

arrow_upward
3
arrow_downward

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

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

person Zach Mathew    schedule 05.06.2012
comment
Спасибо за новую пропатченную версию! И как раз вовремя, мне повезло! - person Yisela; 05.06.2012
comment
Есть ли версия этого патча для новой (4.2) версии iscroll? - person Alvaro; 04.08.2012

arrow_upward
0
arrow_downward

решение не сработало для меня, вот мое простое исправление. Установите для перетаскивания значение 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;
        }
    });
person Contra    schedule 12.02.2014

arrow_upward
-2
arrow_downward

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

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

onBeforeScrollStart: function (e) {if(!hasTouch) e.preventDefault();},
person onebeat    schedule 25.06.2013