Question

我正在开发一个RhoMobile应用程序，我在页面转换方面遇到了很多麻烦。

最后，我决定关闭它们以获得更好的用户体验。每个按钮单击都可以完美地工作，除了我在Collapsible元素中有一个按钮的按钮。对于按钮上的click事件不被解释为可折叠的单击，我使用这个js代码，我怀疑它会造成麻烦：

 $(document).on('pagebeforeshow', '#index',function(e){ 
   $('.details').bind('click', function (e) {      
     e.stopPropagation();
     e.stopImmediatePropagation();
   });
 });

在HTML中：

<div data-role="page" id="index">
Here go headers & navbar and other stuff
</div>
<div data-role="content">
   <div data-role="collapsible-set" class="uurbon-block">
    <div data-role="collapsible" data-collapsed="false">
      <h3 data-position="inline"><p class='alignleft'>Collapsible title</p><div style="clear: both;"></div>        
        <span style="float:right;" class="button-span">
            <a href="some_url.html" data-role="button" data-mini="true" data-inline='true' data-icon="star" data-iconpos="left" class="details" data-transition="none">
              Button
            </a>     
        </span>  
      </h3>
    </div>
  </div>
</div>

这将导致在转换之前显示空白页1-2秒。我正在寻找一个修复，但如果没有，我会很高兴该页面只是黑色（我的应用程序背景也是黑色，所以这眨眼不会那么明显）。注意：我已经尝试在css中设置体背景颜色，不起作用。谢谢你的想法！

Answer 1

正如奥马尔指出的那样，如果你想在可折叠的内部放置一个按钮并防止可折叠在同一浏览器中处理页面时捕获点击，正确的方法是（注意这可能只是适用于RhoMobile，但它值得尝试其他基于jquerymobile的框架）：并避免RhoMobile尝试在新浏览器中打开它：使用：

的javascript：

$(document).on('pagebeforeshow', '#index',function(e){ 
    $('.details').bind('click', function (e) {
            e.stopPropagation();
            $.mobile.changePage("your_page");
    });
});

HTML：按钮

注意href =“javascript：;”。我第一次设置为“＃”和“”，但这不起作用。

JQueryMobile：stopPropagation（）在href点击时使空白页闪烁

1 个答案: