jQuery ScrollTop, при использовании меток ввода двойная прокрутка - PullRequest
Новая
       17

jQuery ScrollTop, при использовании меток ввода двойная прокрутка

0 голосов
/ 19 октября 2011

Я вижу странную проблему, когда плагин ScrollTo прокручивает вдвое ожидаемое расстояние, но только при нажатии на кнопку-переключатель или метку флажка.

Я удалил плагин и заменил его следующим ... 

$("html, body").animate({ scrollTop: '+=50' }, 650);

И все же проблема осталась. Тогда я попытался добавить остановку анимации без удачи ... 

$("html, body").stop(true, true).animate({ scrollTop: '+=50' }, 650);

Затем я создал очень простой jsFiddle для этой проблемы, и теперь я убежден, что это ошибка в jQuery Core. Протестировано во всех версиях jQuery, насколько позволяет jsFiddle. Пока что в Safari, Firefox и IE8 то же самое.

Если рядом с переключателем или флажком установлен элемент <label> и его id используется в качестве атрибута for внутри <label>, щелчок по <label> установит соответствующий переключатель или флажок. (Это должно работать так). 

<input id="type-0" type="radio" name="name" value="" />
<label for="type-0" title="">Click this Label and Radio is selected.</label>

Проблема здесь в том, что jQuery scrollTop() удваивает вычисленную позицию, но только , когда вы нажимаете <label>, который выбирает переключатель или флажок. Он прокручивает правильное расстояние, когда вы нажимаете что-либо еще, включая переключатель или сам флажок.

http://jsfiddle.net/sparky672/sZAkJ/

Как видите, нажатие на ярлык, связанный с его элементом ввода, вызывает двойную прокрутку.

Некоторые другие наблюдения:

На моей странице это выглядело так, как будто прокрутка запускается и останавливается дважды. Вот почему я добавил .stop(true, true) к моей анимации. Однако это никак не повлияет на решение этой проблемы.

Я не могу избежать использования меток для выбора элементов ввода, поскольку у меня есть другая функция, которая зависит от этого. (Пример: http://jsfiddle.net/sparky672/CgMX8/)

Я ищу ...

1) Объяснение этому. Если нет, возможно, это просто (новая?) Ошибка в jQuery Core. Я не смог найти никаких других упоминаний об этой причуде после поиска в Google. Ничего в трекере ошибок jQuery тоже нет .

2) Обходной путь для этого, чтобы я мог нажимать на ярлыки ввода и не иметь прокрутки в два раза. Я хотел бы добиться эффекта прокрутки, когда щелкает что-либо внутри контейнера, включая переключатели и метки. Я думаю, что селекторы могут быть улучшены, так что прокрутка может быть разрезана пополам при нажатии на ярлык, но все еще работает нормально, когда нажимается что-либо еще. (Это может не очень хорошо работать, поскольку все равно выглядит так, как будто анимация запускается дважды.)

1 Ответ

2 голосов
/ 19 октября 2011

1) Объяснение этому.Если нет, возможно, это просто (новая?) Ошибка в jQuery Core.Я не смог найти никаких других упоминаний об этой причуде после поиска в Google.Ничего в трекере ошибок jQuery тоже нет.

Это не проблема с scrollTop или анимацией.Это связано с тем, что событие click обрабатывается дважды на #wrapper при нажатии label.

При нажатии label событие click всплывает до #wrapper,Тем не менее, нажатие label также вызывает событие click на input, к которому он привязан, которое также всплывает до #wrapper.

. В доказательство этого посмотрите этот пример: http://jsfiddle.net/g9gAT/. Каждый раз, когда обрабатывается событие click, я добавляю имя тега целевого элемента.Когда вы нажимаете label, к нему добавляется label, за которым следует input.

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

$("#wrapper label").click(function (e) {
    e.stopPropagation();
});

Пример обновления: http://jsfiddle.net/r3fX4/

...