Нажмите и удерживайте, а затем перенаправьте страницу - PullRequest
Новая
       19

Нажмите и удерживайте, а затем перенаправьте страницу

2 голосов
/ 13 июня 2019

Помогите мне определить, что не так, я хочу, чтобы страница перенаправлялась через определенное время, скажем, 2 секунды, нажав и удерживая кнопку, но если количество времени не превысило 2 секунды, таймер сбрасывается,И страница перенаправляется только после того, как кнопка отпущена.

в формате html: 

<div class="text-holder" id="button" style="display:none">
  <div class="body-border load"></div>
  <h2 class="text-holder-click show click-hold-anim">click and hold</h2>
  <h2 class="text-holder-hold hide hold-anim" id="text-hold">hold</h2>
</div>

В то время как JavaScript был: 

 var timeout_id = 0,
     hold_menu = $('#button'),
     hold_time;

 hold_menu.mousedown(function () {
    timeout_id = setTimeout(hold_time);
    if (hold_time < 2000) {
    clearTimeout;
    } event.preventDefault();
 }).on('mouseup click', function () {
    clearTimeout(timeout_id);
    timeout_id = setTimeout(window_location, hold_time);
 });

 function window_location() {
 window.location.href = 'certain_page.html'
 };

1 Ответ

0 голосов
/ 13 июня 2019

Как уже отмечалось, вы можете легко использовать setTimeout и clearTimeout как таковые:

Здесь я попытался сохранить HTML-код похожим на ваш.В целях тестирования я избавился от второго h2 и сохранил только первый.Я удалил style = "display: none", чтобы я мог видеть элемент h2, который нужно щелкнуть и удерживать, и я добавил идентификатор "click-hold" для этих элементов h2, чтобы наши слушатели jQuery могли запускать 

let timeout_id;
let time_passed = 0;

 $("#click-hold").on("mousedown", function (e) {
    e.preventDefault();
    //set interval when mouse is held down; it will increase time_passed by 1 every 1000ms(1s) and
    //append it to a div to show curr time passed
    timeout_id = setInterval(()=>{time_passed+=1; $("#append_here").empty().append(time_passed);}, 1000);
 });

 $("#click-hold").on('mouseup', function (e) {
   //button was released; clear interval that's been adding to time_passed
   clearInterval(timeout_id);
   
   //check if the time passed was greater or equal to 2(equivalent to 2s). This can be changed to 3,
   //4, 5, etc with each representing time elapsed in seconds. If condition is met, redirect. If not,
   //reset time_passed to 0
   if(time_passed >= 2){
      window.location.href="https://stackoverflow.com";
   }else{
      time_passed = 0;
   }
 });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <body style="text-align:center">
        <p>PAGE WILL REDIRECT AFTER 2s HOLDING TEXT BELOW</p>
        <div class="text-holder" id="button">
            <div class="body-border load"></div>
            <h2 class="text-holder-click show click-hold-anim" id="click-hold">CLICK AND HOLD</h2>
        </div>
        
        <p>Time Passed While Holding Text:</p>
        <div id="append_here">0</div>
    </body>
</html>

Таким образом, когда этот элемент удерживается, тайм-аут начинается с 2000 мс и, как только он достигает этого времени, он изменит URL окна, как вы ранее делалив отдельной функции.Если в какой-то момент мышь нажимает на этот элемент с id = "click-hold", то тайм-аут будет сброшен, и ничего не произойдет.

Я проверил это в моих собственных html-файлах, и это сработалоправильно, поэтому, пожалуйста, спросите, если что-то не работает должным образом

...