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

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行为。

没有诸如导航栏项之类的更高点击优先级的东西。

在您的情况下，如果带有导航栏的标头是固定的，并且启用了全屏属性，则标头将覆盖部分页面内容。 导航栏选项卡触发click事件时，相同事件将传播到下面找到的所有元素（在您的情况下，这是一个选择框）。

为了避免这种情况，您应该将自己的click事件绑定在导航栏li元素上（就像您可能这样做，因为您具有href =“＃”一样），并在click事件中使用此方法：

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

可以在这里找到更多关于此的信息：

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

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