javascript - 修复了页眉和页脚在点击事件时移位的问题

Question

我的 jquery 移动应用程序中的固定页眉和页脚有问题。如果我点击屏幕，固定的页眉和页脚不再固定，它们就会移位，但我不知道如何修复。有解决该错误的意见吗？ 我创建了一个 fiddle .

    <div style="height:100%; width:100%" class="ui-page" data-role="page" data-position="fixed" id="main">
        <div style="height:10%"" data-role="header" data-position="fixed"> 
            <a class="ui-btn-left" name="backo" data-icon="back" data-rel="button" ></a>

        <h1>title</h1>
        </div>
        <div style="height:100%; width:100%" data-role="content" id="container">
<ul data-role="listview" data-inset="true" class="ui-listview ui-listview-inset ui-corner-all ui-shadow">
    <div style="width:95%;padding-right:5%;" id="chatOutput">

    </div>
    </ul>
        <div style="height:15%; width:100%;background-color:#e9eaed;border: 0px;border-color: transparent;" data-role="footer" data-position="fixed">

    <div style="width:96%;padding-right:2%;padding-left:2%" class="ui-grid-a">
        <div style="height:100%;width:80%" class="ui-block-a"><input type="text" id="chatText" paceholder="type your text here"></div>
        <div style="height:100%;width:20%" class="ui-block-b"><button style="font-size:90%" class="ui-btn ui-shadow ui-icon-carat-r" id="chatSend">send</button></div></div>

      </div>
        </div>
        </div>

编辑:我发现了这个:$("[data-role=header]").toolbar({ tapToggle: false }); 并且工作正常。

Answer 1

在页眉和页脚 div 中添加 data-tap-toggle="false"。

这将防止在点击/点击时切换页眉/页脚