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

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元素上绑定自己的click事件（就像您可能因为你有href =“＃”而这样做）并且在你的click事件中，使用它：

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

更多相关信息可以在这里找到;：

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

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