Как предотвратить выпадение кликов на Android с помощью Jquery Mobile? - PullRequest
Новая
       20

Как предотвратить выпадение кликов на Android с помощью Jquery Mobile?

2 голосов
/ 16 марта 2012

У меня есть страница Jquery Mobile.В моем заголовке у меня есть кнопка, чтобы открыть скрытый слой над моей настоящей страницей.Этот слой также содержит заголовок с кнопкой на том же месте.Если я показываю слой и нажимаю на кнопку, он «проливается» на кнопку ниже, запуская оба.

Не уверен, поможет ли HTML-код: 

<div data-role="page" id="base" data-wrapper="true">
   <div data-role="header" data-theme="a">
      // first button 
      <div class="headWrapLeft ui-btn-left">
        <div data-role="controlgroup" > 
           <select data-iconpos="notext" data-icon="home">
              <option value="global">ALL</option>
              <option value="local" selected="selected">SINGLE</option>         
              <option value="menu">Main Menu</option>
            </select>
         </div>
       </div>
       <h1>Header</h1>                  
    </div>
    <div data-role="content">
    // page content  
    </div>


    <div data-role="panel" data-id="setup" data-panel="popover"">

       <div data-role="page" data-show="first" id="main_setup">
      <div data-role="header" data-position="fixed" data-theme="a">
            // back button will be inserted here
            <h1>Setup</h1>
          </div>
          ...
       </div>
    </div>
 </div>// end wrapper page

Первая страницамоя базовая страницаВсплывающая панель - это оверлейный контейнер, который открывается на смартфонах как полноэкранная HTML-страница.На планшете все работает нормально, потому что панель открывается как всплывающее окно И нет кнопки «позади» панели на заднем плане.На смартфоне, однако, кнопка находится прямо на верхней части страницы выбора фона.Когда я нажимаю кнопку «Назад», происходит выбор.

Вопрос:
Вы можете найти некоторых людей, спрашивающих здесь и там, как предотвратить утечку кликов на Android.На самом деле я не нашел ни одного работающего решения.

Я не уверен, что это связано с игнорированием всплывающих событий или z-index, поэтому:

Я ищу какие-либо идеикак быть уверенным, если я нажму на кнопку, эта кнопка и ничего больше не получит щелчок ... Любая идея о том, как этого добиться, очень ценится!

Спасибо за помощь!

РЕДАКТИРОВАТЬ:
Я думаю, я знаю, что не так - посмотрите эту проблему на Android:
http://code.google.com/p/android/issues/detail?id=6721

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

Спасибо за еще несколько идей!

Ответы [ 3 ]

3 голосов
/ 16 марта 2012

Возвращение false из метода click() должно предотвратить дальнейшее образование пузырьков.

1 голос
/ 17 марта 2012

Хорошо. Вот как я это делаю.

Когда я показываю наложенную всплывающую панель, я звоню так: 

// Android-Bleeding-Click
// http://code.google.com/p/android/issues/detail?id=6721   
var $popPanel = $('div:jqmData(id="setup")');

$('.ui-page').not( $popPanel.find('.ui-page-active') )
    .find(".ui-header")
    .first()
       .find(".ui-btn, input, select, textarea")
       .addClass('ui-disabled androidStealsMyTime')
       .attr('disabled','disabled')

Когда скрываю оверлей, я звоню так: 

$('.androidStealsMyTime').removeClass('ui-disabled androidStealsMyTime')
                           .removeAttr('disabled');

Выше приведено для улучшенных элементов JQM. Если бы это были простые вводы, вы могли бы переключать отключено на самом входе, но поскольку JQM добавляет некоторые элементы в качестве дочерних или родственных элементов, вам нужно захватить все, что есть. Это не идеально ... отключено = отключено для элементов a.link семантически сомнительно, я думаю, но тогда agin, он помещается в одну строку и работает.

1 голос
/ 16 марта 2012

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

Событие vclick может запускаться дважды на некоторых устройствах (а именно на Android 2.1 до 2.3, но на других тоже)и если содержимое вокруг области щелчка изменяется между моментами запуска этих двух событий, вы можете получить два элемента, которые запускают обработчики событий.

Вот исправление, которое я использую, когда хочу использовать vclickevent: 

//setup flag
var vclick_ok = true;

//delegate the event handling so any element added at any time with the correct class and tagName will trigger this event handler
$(document).delegate('a.vclick', 'vclick', function () {

    //check if it's OK to run the event handler
    if (vclick_ok) {

        //if it's OK to run, disable the next time this event handler runs until the setTimeout fires and resets the flag
        vclick_ok = false;
        setTimeout(function () { vclick_ok = true; }, 500);
    }
});

Это позволяет нажимать ссылку только раз в полсекунды, что вполне подходит для открытия диалога (так как пользователь не будет ожидать быстрого нажатия кнопки в любом случае).

...