jquery-mobile - 打开面板时如何防止jquery移动工具栏切换

Question

我的 jQuery 移动项目上有一个固定的标题，设置为 data-tap-toggle="true"。

<div data-role="header" data-position="fixed" data-fullscreen="true" data-id="hdr" data-visible-on-page-show="false" data-tap-toggle="true">
    <h1>My Title</h1>
</div><!-- /header -->

点击屏幕时标题会正确切换。问题是当我点击链接打开面板时，标题也会显示。

<a href="#mypanel" data-role="button" data-inline="true" data-icon="bars" id="panel_link">Test</a>

这是我的面板：

<div data-role="panel" id="mypanel" data-position="right" data-display="overlay" data-theme="b">
    <div class="ui-panel-inner">
        <p>Content</p>
    </div>
</div><!-- /panel -->

我试图将面板按钮列入黑名单，如下所示：

$( document ).on( "pageinit", "#demo-page", function() {
        $("[data-role=header],[data-role=footer]").fixedtoolbar({ tapToggleBlacklist: "a, button, input, select, textarea" });
});

我还尝试创建自己的单击事件，将标题 tapToggle 选项更改为 false 以及仅打开面板。

$('#panel_link').on('click', function (event) {
    $("[data-role=header]").fixedtoolbar( "option", "tapToggle", false );
alert('test');
    $( "#mypanel" ).panel( "open" );
    event.stopPropagation();
});

Answer 1

尝试这个：

 $('#panel_link').on('click', function (event) {
        $( "#mypanel" ).panel( "open" );
        event.stopImmediatePropagation();
    });

stopPropagation查看和jquery的区别：stopPropagation vs stopImmediatePropagationstopImmediatePropagation