0

在这个问题上抓挠我的头......有一个弹出窗口，a）允许用户与之交互，即菜单等，如果他们想在它之外关闭点击/触摸（iPad等）。问题是如果我插入“e.preventDefault();” 停止弹出窗口及其父项后面的链接，弹出窗口的内容在 iPad 上停止工作，但在桌面浏览器上工作正常......

有人知道吗？！

<div id="divQuickCartDialogOverlay">
    <div id="divQuickCartDialog">
        <div id="overlayQuickBasket"><!--SELECT MENUS, BUTTONS ETC HERE --></div>
    </div>
</div>

<script language="javascript" type="text/javascript">
        $(document).ready(function ()
        {
            // Initial call
            setTimeout(basketExpiryCheck, 60000);

            // old style quick basket
            $('#divQuickCart').mouseleave(function() {
                closeCart('mleave');
            });

            // hide cart dialog if user clicks on background div
            $(document).on('click touchstart', function (e) 

            {
                e.preventDefault();

                var container = $("#divQuickCartDialog");
                if (container.has(e.target).length === 0)
                {
                    closeCartDialog();
                }
            });

            checkBasketRefresh();
        });

    </script>


<style>
#overlayQuickBasket { margin:0 auto; }
body, html { height:100%; }
#divQuickCartDialog { height:100%;width:100%; }
</style>

<script>
$(function() {
    $('#overlayQuickBasket').each(function() {

        $(this).parent().css('position', 'relative');
        $(this).css('position', 'absolute');
        $(this).css('top', '50%');
        $(this).css('left', '0px');
    });
    $(window).resize(function() {

        var thisheight = Math.round(parseInt($('#overlayQuickBasket').outerHeight()) / 2);
        $('#overlayQuickBasket').css('margin-top', '-' + thisheight + 'px');

        if(parseInt($('#overlayQuickBasket').outerHeight()) > parseInt($('#overlayQuickBasket').parent().outerHeight())) {

            $('#overlayQuickBasket').parent().outerHeight($('#overlayQuickBasket').outerHeight());
        }
    }).trigger('resize');
});
</script>
4

1 回答 1

0

您可以尝试这样做：

为 div 设置属性 tabindex #divQuickCartDialog：

<div id="divQuickCartDialog" tabindex="-1">
     ...
</div>

CSS 仅用于样式，设置outline为 0：

#divQuickCartDialog {
    outline:0;
    height:100%;
    width:100%;
}

然后将您的文档click和touchstart处理程序替换为：

$("#divQuickCartDialog").on('blur', function (){
     closeCartDialog();
 });

#divQuickCartDialog打开时，您必须对其进行设置focus。

于 2013-06-26T13:30:41.057 回答