android - 如何使用 Jquery Mobile 防止 Android 上的点击渗漏？

Question

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

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

感谢您提供更多想法!

Answer 1

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