Вопрос по mobile, button, events, jquery, click – jQuery mobile (событие клика)

4

Я занимаюсь разработкой гибридных приложений для смартфонов.

Я пытаюсь скрыть / показать<div> сslideDown/slideUp.

Когда я нажимаю на кнопку, меню<div> предполагается скрыть / показать в зависимости от контекста. На моем компьютере все работает хорошо, но на моем мобильном просто не работает, ничего не происходит.

Вот мой HTML-код

<a class="btnMenuDyn" data-role="button">Masquer le menu</a>

и вот мой мобильный код jQuery:

$(document).bind('pageinit', function(e){


// définition des variables
var btnMenuDyn = $('a.btnMenuDyn'),
    menuDyn = $('div.menuDyn');

$(btnMenuDyn).bind('click', function(){


    // condition pour afficher ou non le menu
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});
});

Ваш Ответ

2   ответа
6

эта проблема заключается в том, что мобильные телефоны не поддерживают щелчки, они используют сенсорный запуск и касание, поэтому могут отслеживать движение, если вы все еще хотите проверить на компьютерах, вы можете сделать это

$(btnMenuDyn).bind('touchstart mousedown', function(event){
    event.preventDefault();
    if ($(menuDyn).hasClass("menuDynHide"))
    {
        $(menuDyn).slideDown().removeClass("menuDynHide");
    }
    else{
        $(menuDyn).slideUp().addClass("menuDynHide");
    }

});

другой вопрос с тем же ответомJQuery TouchStart в браузере

больше информации можно найти наhttp://backtothecode.blogspot.com/2009/10/javascript-touch-and-gesture-events.html

Да, это было добавление touchstart и e.preventdefault, чтобы получить идеальный результат. Благодарю. guillaume coulbaux
Будьте осторожны, используя touchstart. Это может быть вызвано непреднамеренно, когда пользователь пытается провести прокруткой. Я рекомендую хотя бы использовать touchend. В идеале вы должны обновлять пользовательский интерфейс при сенсорном запуске и действовать только при касании. Я создал плагин, который будет делать этоjquery-touchclick
1

Я бы предложил использоватьon() вместоbind()

И так как вы делаете это:

var btnMenuDyn = $('a.btnMenuDyn')

btnMenuDyn является элементом jquery dom, поэтому измените это:

if ($(menuDyn).hasClass("menuDynHide"))

к этому

if (menuDyn.hasClass("menuDynHide"))

И желательно объявить элементы jquery dom следующим образом:

var $btnMenuDyn = $('a.btnMenuDyn')
Да, я думаю, вы правы, это вопрос стиля. Возможно, потому что я больше работаю с безопасными типами языками, я не вижу веской причины использовать венгерскую нотацию. Я предполагаю, что вторая половина моего комментария была слишком объективной, так что оставляет +1 :)
+1 за использование вместо связывания (см. Здесь, почемуapi.jquery.com/bind) -1 для именования переменной с префиксом $ Так что результат нейтральный :)
Я не согласился бы с объявлением элементов jquery dom с префиксом $, а именно из-за унаследованного от php использования $, тогда как jquery только что появился недавно.
@victorvartan Это фактически единственный раз, когда я считаю необходимым указывать тип данных в Javascript. Когда дело доходит до сравнения переменных, я придерживаюсь=== в JS, потому что это эквивалентно== в строго типизированных языках.
@victorvartanstackoverflow.com/questions/205853/… Но, конечно, все сводится к личным предпочтениям. Если вам это не нравится, не используйте его.

Похожие вопросы