Блог

У меня есть две кнопки в одном и том же месте (одна над другой, абсолютная позиция). Я использую Jquery mobile 1.4 и Phonegap 3.3.

кнопка # 1 изначально visible

кнопка # 2 изначально hidden

Когда я нажимаю на кнопку # 1, она должна скрывать кнопку # 1 и отображать кнопку # 2.

Но странно то, что при нажатии на кнопку # 1 она также срабатывает на кнопке # 2, как если бы она уже отображалась. Итак, с помощью приведенного ниже кода нажатие на кнопку # 1 скрывает кнопку # 1, отображает кнопку # 2, скрывает кнопки # 2 и отображает кнопку # 1 … вернемся к тому, с чего мы начали!

Я что-то делаю не так?

HTML:

       <a id="miniWeightLevel" class="ui-btn ui-btn-b ui-corner-all">My Factor</a>
            <div id="minifyCross">
                <div id="minifybutton" class="ui-btn btn-small-round ui-icon-delete ui-btn-b ui-btn-icon-notext ui-btn-inline"></div>
            </div>   
 

JS:

 $(document).on('pagebeforeshow', '#welcome-page', function(event, docdata){     
    //initial state : 
    $('#miniWeightLevel').hide();
    $('#minifyCross').show();

    //bindings :
    $('#miniWeightLevel').unbind('vclick').bind('vclick', function (e) {
        e.stopPropagation();
        $('#miniWeightLevel').hide();
        $('#minifyCross').show();
    });
    $('#minifyCross').unbind('vclick').bind('vclick', function (e) {
        e.stopPropagation();
        $('#miniWeightLevel').show();
        $('#minifyCross').hide();
    });
});
 

Я также сталкивался с этим в прошлом vclick , когда обработчики дважды запускались на мобильных устройствах. Вы можете исправить это, добавив a return false в конце ваших vclick обработчиков.

Проверьте эти скрипты. Этот первый, http://jsfiddle.net/8g8mmzey/2 /, соответствует вашему исходному коду. При запуске на рабочем столе Chrome все в порядке. Однако при запуске этого на iPhone я вижу, что срабатывают оба события — когда я нажимаю «x», на мгновение появляется другая кнопка, но затем срабатывает ее щелчок, скрывающий ее и снова показывающий «x».

Вторая скрипка http://jsfiddle.net/ff23yL4u / показывает обновленный код с return false в конце обработчиков.

 $('#miniWeightLevel').unbind('vclick').bind('vclick', function (e) {        
    e.stopPropagation();
    $('#miniWeightLevel').hide();
    $('#minifyCross').show();

    return false;
});
$('#minifyCross').unbind('vclick').bind('vclick', function (e) {       
    e.stopPropagation();
    $('#miniWeightLevel').show();
    $('#minifyCross').hide();

    return false;
});
 

Причина, по которой сработала функция e.preventDefault(), заключается в том, что функция stopPropagation используется, чтобы убедиться, что событие не всплывает по цепочке. например. щелчок по тегу также запускает события щелчка на его родительском элементе, а затем на его родительском элементе и т. Д. stopPropagation предотвращает это.

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

Хорошо, я нашел решение.

Вместо использования e.stopPropagation() просто используйте:

e.preventDefault();

Не уверен, почему, но это решило мою проблему.