jQuery Mobile 选择菜单在弹出窗口中的任意位置点击打开答案

【问题标题】：jQuery Mobile Select Menu open on tap anywhere in PopupjQuery Mobile 选择菜单在弹出窗口中的任意位置点击打开
【发布时间】：2015-01-06 08:26:04
【问题描述】：

我在弹出窗口中打开了一个简单的表单：

        <div data-role="popup" id="request-form" data-dismissible="false">

            <div class="ui-header">
                <h2>Request Holiday</h2>
            </div>

            <div>
                <div data-role="fieldcontain" class="single-day">
                    <label><b>Date</b>: <span id="date"></span></label>
                    <select id="half-day">
                        <option value="Full">Full Day</option>
                        <option value="Morning">Morning Only</option>
                        <option value="Afternoon">Afternoon Only</option>
                    </select>
                </div>

                <button id="request-button" data-theme="B">Request</button>            
                <button id="cancel-button" data-rel="back">Cancel</button>
            </div>            
        </div>

这很好用，除非当我单击 iOS 中的任一按钮、标签或标题时，选择菜单会弹出打开 - 每当在弹出窗口中触发单击/点击事件时，它似乎都会获得焦点。这似乎只在表单处于弹出窗口时发生。

我最初打算使用一个对话框，但这会导致我的原始页面在我关闭对话框时失去它的滚动位置，我更喜欢弹出窗口的外观。

这是一个错误吗？有没有办法可以停止选择自动接收焦点？还有其他解决方法吗？

【问题讨论】：

除了页面 div 之外，您是否将 Popup 包装在其他 div 中？
不，弹出的 div 就在页面 div 里面，也就是在 body 里面。
我无法使用 safari 在 iphone 5 iOS 8 中重现该问题。
您是否在页面上分配了任何 (vclick) 或其他可能干扰的点击功能？这听起来很奇怪，但我在弹出窗口中遇到了类似的问题并追查到了。
不，没有类似的 - 试试这个精简的例子：dl.dropboxusercontent.com/u/2497368/test.html - 点击打开，然后点击请求假期标题。正如您从源代码中看到的那样，我什至没有在精简版中执行任何 javascript。

标签： jquery-mobile

【解决方案1】：

找到了一个 hacky 解决方案，其中涉及扩展弹出窗口小部件，使用相同的代码覆盖一个方法，但注释掉导致第一个可聚焦元素在单击弹出窗口时获得焦点的代码：

$.widget( "mobile.popup", $.mobile.popup, {

_openPrerequisitesComplete: function() {
    var id = this.element.attr( "id" ),
        firstFocus = this._ui.container.find( ":focusable" ).first();

    this._ui.container.addClass( "ui-popup-active" );
    this._isOpen = true;
    this._resizeScreen();

    // Check to see if currElement is not a child of the container.  If it's not, blur
    if ( !$.contains( this._ui.container[ 0 ], this.document[ 0 ].activeElement ) ) {
        this._safelyBlur( this.document[ 0 ].activeElement );
    }
//  if ( firstFocus.length > 0 ) {
//      this._ui.focusElement = firstFocus;
//  }
    this._ignoreResizeEvents();
    if ( id ) {
        this.document.find( "[aria-haspopup='true'][aria-owns='" +  id + "']" ).attr( "aria-expanded", true );
    }
    this._trigger( "afteropen" );
},
});

【讨论】：