Safari. Конфликт click() и mouseover()?

Question

[doctorcat]

myserver1.ru/dev/anahat/new
Не могу понять почему слайды не переключаются с 1 клика. Особенно это заметно с мобильного телефона тыкаешь 1 раз ничего не происходит кроме подсвечивания thumbnail'а а со второго клика уже меняется слайд, но не всегда. слайдер, как бы "тупит". Пожалуйста подскажите, что делаю не так. Заранее благодарен.

Answer 1

[doctorcat]

Вообщем проблема была в mouseover. А именно mouseover в safari срабатывал и не срабатывало событие click. То есть при клике на элемент с мобильного телефона он подсвечивался, что говорит о срабатывании mouseover, но слайдер не менялся - что говорит об отсутствии срабатывания события click. Всё решилось добавление условия для mouseover. if ($(window).width() > '768') По сути мы этим действием отключаем ховеры для всех устройств у которых размер экрана меньше 768px.

В итоге получилось вот так:

if ($(window).width() > '768') {
      $( ".slidebox" ).mouseover(function() {
        $(this).find(".newhover" ).css("display", "inline-block");
        $(this).find(".newnormal").css("display", "none");
        $(this).find(".text-item").css("color", "red");
        $(this).find(".colorblock").css("background-color", "#3b794f");

      });
      $( ".slidebox" ).mouseout(function() {
        $(this).find(".newhover" ).css("display", "none");
        $(this).find(".newnormal").css("display", "inline-block");
        $(this).find(".text-item").css("color", "black");
        $(this).find(".colorblock").css("background-color", "#a7c94b");
      });
  }

PS: Спасибо за помощь MatriXNeO, он по сути ничем не помог, но заставил более глубинно взглянуть на свой вопрос, в связи с чем и был найден логичный ответ.

Comments

[doctorcat]

https://habrahabr.ru/post/212959/ - целая статья на эту тему.

Answer 2

[iBird Rose]

а почему они по клику должны меняться, если там draggable стоит? тобишь нужно схватить и тянуть. как мышкой, так и табом на телефоне
p.s. а если ты про нижний ряд, то он не срабатывает из за задержки слайдера. тобишь пока слайд окончательно с анимацией не завершится - ты не сможешь на что то другое кликнуть

Comments

[doctorcat]

Для надмозгов: нужно чтобы слайды менялись по клику.

[iBird Rose]

doctorcat: ну тк читай документацию слайдера и убери функцию draggable. и повесь колбэк следующего слайда на клик.

[doctorcat]

MatriXNeO: Дружище, ты такой умный. Оставь мой вопрос. Мне нужна помощь, а не демонстрация того что ты профи.

[iBird Rose]

doctorcat: а если слишком туп для этого - то выведи стрелки слайдера и стилизуй правую стрелку так чтобы она была на весь слайдер шириной и высотой. и радуйся

[iBird Rose]

doctorcat: дружище - про надмозга ты первый начал)

[iBird Rose]

смотри кароч)
1) убираешь драгабл
$("твой слайдер").owlCarousel({
mouseDrag: false,
touchDrag: false
})
2) добавляешь функцию следующего слайдера на клик
$(".твой слайдер или картинка в слайдере").click(function(){
owl.trigger('owl.next');
})

[doctorcat]

MatriXNeO: я не собираюсь убирать драгабле, не понимаю почему ты вообще в это упёрся. Это должно быть и никак не мешает. второй момент, убрал fade на компе стало работать так как нужно. Через safari с айфона баг сохраняется. По клику на thumbnails не меняются слайды. Либо меняются но тупят. Я не собираюсь добавлять стрелки, мне не нужно это.

[doctorcat]

MatriXNeO: мне так же не нужен этот тригер owl.trigger('owl.next'); мне нужно чтобы слайд менялся в соотвествии с тем thumbnailом который выбрал пользователь. А не просто следующий.

[doctorcat]

MatriXNeO: конкретно вот этот кусок кода работает не совсем корректно с мобильных устройств в моей случае iphone safari
$("#sync2").on("click", ".owl-item", function(e){
e.preventDefault();
var number = $(this).data("owlItem");
sync1.trigger("owl.goTo",number);
});

[doctorcat]

MatriXNeO: о ты глянул всё же сайт, и понял о чем был вопрос? я тебя поздравляю !! ДА именно нижний ряд, да именно с мобильного телефона, да при клике, да не срабатывает sync1.trigger("owl.goTo",number); Ну и как итог... чего подскажешь? или ограничимся тем что ты понял вопрос после 30 минутного флуда в попытке самоутвердиться и дать нелепый, быстрый ответ?

[iBird Rose]

doctorcat: эм.. я это 40 минут назад написал если че) p.s добавил тогда же. баг такой только из за того что анимация не заканчивается и нельзя нажать на кнопку пока она не завершится. поставь dragBeforeAnimFinish: true, может поможет)

[iBird Rose]

doctorcat: а что тебе мешает повесить нормальный слайдер в котором уже есть thumbnails? к примеру тот же flexslider

[doctorcat]

MatriXNeO: В данный момент всё сделано и работает 99% того что должно работать. Единственно что с мобил, только по двойному клику меняется слайдер. Зачем мне всё менять и прикручивать flexslider ? Проще пофиксить один баг, чем заново всё переделывать, это и мешает. В данный момент, всё отлично работает с компов. Сам посмотри, но не работает с safari. Нужен какой-то костыль, или какая-то настройка. Вот для этого я и задал вопрос.

[iBird Rose]

doctorcat: ну уж извините) айфона нет) в стандартном браузере андройда и там же в хроме все нормально у меня) так что хз что за баг. как вариант сказал же в инициализацию и sync1.owlCarousel({ и на sync2.owlCarousel({ вставь dragBeforeAnimFinish: true,
а еще попробуй запоминать не data, a index элемента (var number = $(this).data("owlItem");) и переходить к индексу.

[doctorcat]

MatriXNeO: Вообщем мешает вот этот код
// $( ".slidebox" ).mouseover(function() {
// $(this).find(".newhover" ).css("display", "inline-block");
// $(this).find(".newnormal").css("display", "none");
// $(this).find(".text-item").css("color", "red");
// $(this).find(".colorblock").css("background-color", "#3b794f");

// });
// $( ".slidebox" ).mouseout(function() {
// $(this).find(".newhover" ).css("display", "none");
// $(this).find(".newnormal").css("display", "inline-block");
// $(this).find(".text-item").css("color", "black");
// $(this).find(".colorblock").css("background-color", "#a7c94b");
// });

[doctorcat]

Если его убрать всё работает идеально. Так в принципе и оставлю наверное. Но хотелось бы понять, почему mouseover перебивает click?

[iBird Rose]

doctorcat: вешай тогда класс и меня стили в css, а не в js

[iBird Rose]

doctorcat: и пробуй через другие функции jq. к примеру через тот же .hover или mouseenter и mouseleave

[doctorcat]

MatriXNeO: я бы рад так сделать, но как средствами css это сделать после долгих эксперементов я не знаю. при ховере мне нужно менять картинку на другую. В теории всё отлично работает на практике вариант с js был лучшим. Сейчас вопрос звучит однозначно. "Как сделать чтобы click с safari срабатывал и ему не мешал mouseover". Впринцепе я думаю только 1 вариант. Это вообще убрать ховеры для мобильного телефона это и логично и как раз решит все проблемы.

[iBird Rose]

doctorcat: не существует hover'a на телефонах. и клик - это будет тап, и ховер - тоже тап. поэтому и конфликтуют.

[iBird Rose]

$( ".slidebox" ).mouseover(function() { $(this).addClass('wtf');});
а в ксс уже пишешь
.slidebox.wtf .newhover {display: inline-block;}
.slidebox.wtf .newnormal {display: none;} и так далее

[doctorcat]

MatriXNeO: Извини что общение прошло слегка в грубой форме, но как ни странно решение найдено. За что тебе спасибо в первую очередь :)