android - 固定页脚导航栏下的表单字段具有更高的点击优先级，如导航栏项目

Question

我有带有选择框和输入字段的长页面以及带有图标（页脚菜单）的固定导航栏。如果用户单击导航栏项目并且选择框位于导航栏下方 - 选择框会展开并在点击时做出反应 - 导航栏不会做出反应。每一个答案都将不胜感激。

代码示例：

<div data-role="content">   
        <form id="profileForm">
<label for="sex">Pohlavie:</label>
            <select name="sex" id="sex" data-theme="a" onchange="check_profile_form()">
               <option value="0" placeholder></option>
               <option value="1">žena</option>
               <option value="2">muž</option>
            </select>
</form> 
    </div>    
<div data-role="footer" data-position="fixed" data-toggle="false">
        <div data-role="navbar" data-theme="c">
            <ul>
                <li><a href="#" data-theme="c"><img src="img/ikony_05.png" class="footer_image" /></a></li>
                <li><a href="#" data-theme="c"><img src="img/ikony_06.png" class="footer_image" /></a></li>
                <li><a href="#" data-theme="c" class="ui-btn-active ui-state-persist"><img src="img/ikony_07.png" class="footer_image" /></a></li>
                <li><a href="#" data-theme="c"><img src="img/ikony_08.png" class="footer_image" /></a></li>
            </ul>
        </div>
</div>

Answer 1

这是正常的 javascript 行为。

没有像导航栏项目那样更高的点击优先级。

在您的情况下，当带有导航栏的标题是固定的并且打开了全屏属性时，页面标题将覆盖部分页面内容。当导航栏选项卡触发单击事件时，相同的事件将传播到下面找到的所有元素（在您的情况下，它是一个选择框）。

为了防止这种情况发生，你应该在导航栏 li 元素上绑定你自己的点击事件（就像你可能这样做，因为你有 href="#"）并在你的点击事件中，使用这个：

event.stopPropagation();
event.stopImmediatePropagation();

可以在此处找到更多相关信息；：

• http://api.jquery.com/event.stopPropagation/
• http://api.jquery.com/event.stopImmediatePropagation/

这是一个示例： http: //jsfiddle.net/Gajotres/Xz2np/，单击蓝色框以查看差异。