时间戳

首页 > 解决方案 > 点击特定时间后阻止页面加载

javascript - 点击特定时间后阻止页面加载

问题描述

我想在单击的链接开始加载页面之前在特定时间段内显示一个 jQuery 对话框，但我遇到了持续时间问题。它似乎没有像我预期的那样持续下去。我该如何解决？谢谢！

$(function() {
            $( "#dialog" ).dialog({
               autoOpen: false,  
            });
            $(".images").find("a").eq(1).on('click', function(e) {
                setTimeout(() => {
                    e.preventDefault();
                }, 10000);
                $( "#dialog" ).dialog( "open" );
            });
        });
#dialog {
        display: none;
    }
    
img {
        width: 300px;
        height: 250px;
        object-fit: cover;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <script src=""></script>
    <link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
    
    <div class="images">
        <a href="https://www.site1.com">
            <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
        </a>
        <br>
        <a href="https://www.site2.com">
            <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
        </a>
    </div>
    <div id="dialog" title="Lorem ipsum">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
    </div>

标签： javascriptjquery

解决方案

您不能设置e.preventDefault()超时，您需要在点击后立即使用它，这样浏览器就不会离开。在你的超时设置重定向点击：

$("#dialog").dialog({
  autoOpen: false,
});

$(".images").find("a").eq(1).on('click', function(e) {
  e.preventDefault();
  setTimeout(() => {
    window.location.href = $(this).prop("href")
  }, 3000);
  $("#dialog").dialog("open");
});
#dialog {
  display: none;
}

img {
  width: 300px;
  height: 250px;
  object-fit: cover;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src=""></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />

<div class="images">
  <a href="https://www.site1.com">
    <img src="https://images.pexels.com/photos/413727/pexels-photo-413727.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="Image 1">
  </a>
  <br>
  <a href="https://www.site2.com">
    <img src="https://images.pexels.com/photos/1036623/pexels-photo-1036623.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </a>
</div>
<div id="dialog" title="Lorem ipsum">
  <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod amet, et minus commodi repellendus hic? Ut eos blanditiis quis provident.</p>
</div>

推荐阅读