Question

抓住我的头。有一个弹出窗口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>

Answer 1

你可以尝试一下：

为div #divQuickCartDialog设置属性tabindex：

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

e.preventDefault（）;不在iPad上工作

1 个答案: