如何防止使用 Jquery Mobile 在 Android 上点击流血？答案

【问题标题】：how to prevent bleeding through of clicks on Android using Jquery Mobile?如何防止使用 Jquery Mobile 在 Android 上点击流血？
【发布时间】：2012-03-16 17:55:45
【问题描述】：

我有一个 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

思考解决此问题的最佳方法是什么。我无法将背景页面设置为 display:none 或将其移出视图，因为覆盖页面是嵌套的。我也不想在覆盖页面可见时禁用所有背景链接。

感谢您提供更多想法！

【问题讨论】：

标签： android button jquery-mobile click

【解决方案1】：

从click() 方法返回false 应该可以防止它进一步冒泡。

【讨论】：

【解决方案2】：

你没有展示你是如何绑定你的事件处理程序的，所以我不得不假设你正在绑定到 vclick 事件。如果是这种情况，那么您将不得不手动丢弃第二个被调度的 vclick 事件。

vclick 事件可以在某些设备上触发两次（即 Android 2.1 到 2.3，但也有其他设备），如果单击区域周围的内容在这两个事件触发的时间之间发生变化，那么您可以获得两个元素触发事件处理程序。

这是我想使用vclick 事件时使用的修复：

//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);
    }
});

这允许每半秒只按下一次链接，这对于打开对话框应该没问题（因为用户不会期望能够快速单击按钮）。

【讨论】：

感谢您的修复。我实际上并没有绑定到任何特定的东西。选择是一个普通的 JQM 选择，我手动插入的“后退”按钮是一个按钮，它只是隐藏（）面板。在智能手机上，它在平板电脑“关闭”上读取“返回”。但我会调查你的修复。一定是什么原因造成的。
也很高兴看到您使用相同的“元素锁定”，我正在通过我的脚本使用。

【解决方案3】：

好的。这是我的做法。

当显示覆盖弹出面板时，我称之为：

// 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 增强元素。如果是普通输入，您可以在输入本身上切换 disabled，但由于 JQM 添加了一些元素作为子元素或兄弟元素，因此您需要捕获所有元素。这并不完美......我猜 a.link 元素上的 disabled=disabled 在语义上是有问题的，但是再次，它适合一行并且可以工作。

【讨论】：