Question

我有一个Jquery Mobile页面。在我的标题中，我有一个按钮，可以打开我实际页面上方的隐藏层。该图层还包含一个标题，在同一位置有一个按钮。如果我显示图层并单击按钮，它会出现＆＃34;出血＆＃34;通过触发下面的按钮。

不确定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页面打开。在平板电脑上一切正常，因为面板打开就像一个弹出窗口而且没有按钮＆＃34;后面＆＃34;背景上的面板。然而，在智能手机上，后退按钮位于背景页面选择的顶部。当我单击后退按钮时，选择会触发。

问题：
您可以找到一些人在这里和那里询问如何通过点击Android来防止出血。我还没有找到任何有效的解决方案。

我不确定这与事件冒泡或z-index被忽略有关，所以：

我正在寻找任何想法如何确保，如果我点击一个按钮，这个按钮，没有其他任何东西得到点击...任何关于如何实现这一点的想法非常感谢！

感谢您的帮助！

修改
我想我知道什么是错的 - 在Android上看到这个问题：
http://code.google.com/p/android/issues/detail?id=6721

思考解决这个问题的最佳方法是什么。我无法将后台页面设置为display：none或将其移出视图，因为叠加页面是嵌套的。我也不想在叠加页面可见时禁用所有后台链接。

感谢您提供更多想法！

Answer 1

从false方法返回click()可以防止它再冒泡。

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

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

Answer 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元素在语义上有问题我猜，但随后agin，它适合一行并且工作。

如何使用Jquery Mobile防止因点击Android而出血？

3 个答案: