1

我想在 jQuery Mobile 中从导航栏按钮中打开一个弹出窗口。问题是按下按钮后的小亮点（默认为蓝色）。在桌面浏览器上，高亮显示在 200 毫秒左右后被移除。在移动设备上，有时会在打开弹出窗口后看到此突出显示，并且在关闭它时不会将其删除。Nexus 4/10 上的文件选择存在一些问题。我还添加了一个文件选择：在移动设备上永远不会删除突出显示，在桌面浏览器上这不是更大的问题。

我创建了一个小提琴来说明这个问题：

http://jsfiddle.net/eGFaG/1/

HTML：

<div data-role="ui-page">
    <div data-role="ui-header">    
        <div data-role="navbar">
            <ul>
                <li><a id="popupTest">Popup function</a></li>
                <li><a href="#popup" data-rel="popup">Popup Link</a></li>
                <li><a id="fileUpload">File select</a></li>
            </ul>
        </div>
    </div>
    <div data-role="ui-content">
        <input type="file" id="fileSelect" data-role="none">
        <div id="popup" data-role="popup">
            <fieldset data-role="controlgroup" data-inset="true">
                <input type="checkbox" name="option1" id="option1" value="true">
                <label for="option1">Option #1</label>
                <input type="checkbox" name="option2" id="option2" value="true">
                <label for="option2">Option #2</label>
                <input type="checkbox" name="option3" id="option3" value="true">
                <label for="option3">Option #3</label>
            </fieldset>
        </div>
    </div>
</div>

JS：

$('#popupTest').click(
    function(event) {
        $('#popup').popup(
            'open', {
                x: $(this).offset().left + $(this).width() / 2,
                y: $(this).offset().top + $(this).height()
            }
        );

        event.preventDefault();
        return false;
    }
);

$('#fileUpload').click(
    function(event) {
        $('#fileSelect').click();
        event.preventDefault();
        return false;
    }
);

CSS：

#popup fieldset {
    margin-top: 0;
    margin-bottom: 0;
}

#fileSelect {
    position: absolute;
    top: -10000px;
    left: -10000px;
}

我正在寻找一种使用官方 jQuery Mobile 选项来防止蓝色突出显示的通用方法。修改样式表可能是一种选择，但突出显示也存储在控件内部。不知道有没有其他副作用。

以编程方式打开弹出窗口时，桌面浏览器上没有突出显示。当在页脚上使用导航栏时，必须以更复杂的方式计算位置（页脚固定？）。

那么有什么我错过的选择吗？在单击导航栏按钮时以编程方式执行某些操作时，使用 event.preventDefault() 并返回 false 是否正确或缺少其他内容？

4

0 回答 0