Событие с событием с javascript

Мне действительно хотелось бы узнать, есть ли способ выполнить функцию, когда вы нажимаете (на мобильном устройстве) или нажимаете (на настольном устройстве) форму submit/anchor/etc. и удерживайте его в течение некоторого времени без использования jQuery!Событие с событием с javascript

function clicked() { 
    //set some kind of timer or so... 
} 

function toBeExecutedNMillisecondsAfterAnchorWasClicked() { 
    //do some stuff... 
}

источник

2014-12-10 avantimaestro

Использование 'setTimeout (функция() {...}, intervalInMilliseconds)'? – albciff

(function() { 
 

 
    var mouseTimer; 
 
    function mouseDown() { 
 
     mouseUp(); 
 
     mouseTimer = window.setTimeout(execMouseDown,2000); //set timeout to fire in 2 seconds when the user presses mouse button down 
 
    } 
 

 
    function mouseUp() { 
 
     if (mouseTimer) window.clearTimeout(mouseTimer); //cancel timer when mouse button is released 
 
     div.style.backgroundColor = "#FFFFFF"; 
 
    } 
 

 
    function execMouseDown() { 
 
     div.style.backgroundColor = "#CFCF00"; 
 
    } 
 

 
    var div = document.getElementById("bam"); 
 
    div.addEventListener("mousedown", mouseDown); 
 
    document.body.addEventListener("mouseup", mouseUp); //listen for mouse up event on body, not just the element you originally clicked on 
 
    
 
}());

#bam { width:100px; height: 100px; border: 1px solid black; }

<div id="bam"> Hold mouse button for 2 seconds. </div> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p> 
 
<p>Bacon</p>

источник

2014-12-10 14:21:24 epascarello

отличный код, но небольшое объяснение помогло бы понять. Одних комментариев недостаточно. – avantimaestro

Код прост. Что вы не понимаете? Кажется довольно прямолинейным, поэтому я оставил его до минимальных комментариев. Добавьте событие mousedown в элемент, который запускает таймер для выполнения. Добавить событие mouseup в документ. Если активировано событие up, отмените добавленный таймер. Если мышь не освобождена в установленном peroid времени, таймер выполняется. – epascarello

Я понял это, но мне пришлось читать его более двух раз ^^ – avantimaestro

Вы можете использовать функцию setTimeout:

function clicked() { 
    // Execute your function after 2000 milliseconds 
    setTimeout(toBeExecutedNMillisecondsAfterAnchorWasClicked, 2000); 
}

источник

2014-12-10 14:06:01 dtengeri

Это не вопрос, который касался определения длины пресса. –

@torazaburo, я не думаю, что речь шла о длине нажатия клавиши. Может быть, вопрос должен быть яснее. – Billy

Вопрос: «нажмите ... ** и удерживайте его в течение некоторого времени **». –

Я бы сделать что-то вроде этого, чтобы получить разницу между MouseDown и MouseUp. Тогда я бы сделал оператор if/else с той переменной diff, которую я создал.

Вот скрипка :: http://jsfiddle.net/mgfkdu9x/2/

<button id="element">My Button</button> 

(function() { 
    var element = document.getElementById('element'), 
     start, 
     end; 

    element.onmousedown = function() { 
     setTimeout(function() { 
      if (element.onmousedown=true) 
       toBeExecutedNMillisecondsAfterAnchorWasClicked(); 
     }, 5000); 
    }; 

})(); 

function toBeExecutedNMillisecondsAfterAnchorWasClicked() { 
    console.log('function start'); 
}

источник

2014-12-10 14:07:08 cport1

почему '+ new Date();', но не 'Date.now()'? –

Они те же, но я буду обновлять его, потому что Date.now() выглядит более красивым :) – cport1

этот код не работает, как я хочу, потому что он проверяет только время, когда вы отпустите кнопку. Если вы удерживаете его и 5 секунд, то ничего не произойдет, пока вы не отпустите кнопку. – avantimaestro

-1

Если вы не хотите, чтобы сделать поведение по умолчанию, вы должны предотвратить ее, а затем выполнить вашу функцию после того времени, когда вы хотите передать.

Для простоты я хотел бы сделать:

document.getElementById("yourElementId").addEventListener('click', function(event){ 
    event.preventDefault(); 
    setTimeout(function(){ 
     //YOUR CODE GOES HERE 
    }, 2000); 
});

источник

2014-12-10 14:17:25

Код taht будет выполнять функцию в тайм-ауте, даже если вы отпустили кнопку до двух секунд. – avantimaestro

Извините, но я не знаю, что вы проголосовали за меня. Вы не указали это. –

я не проголосовал ... я не могу даже голосовать ... недостаточно репутации – avantimaestro

http://jsfiddle.net/mgfkdu9x/4/

(function() { 

    var mouseTimer; 
    function mouseDown() { 
     mouseUp(); 
     mouseTimer = window.setTimeout(execMouseDown,500); 
    } 

    function mouseUp() { 
     if (mouseTimer) window.clearTimeout(mouseTimer); 
     div.style.backgroundColor = "#FFFFFF"; 
     setTimeout(function(){ 
      a.setAttribute("href", "google.com"); 
     },0); 
    } 

    function execMouseDown() { 
     div.style.backgroundColor = "#CFCF00"; 
     a.setAttribute("href", "javascript:void();"); 
    } 

    var div = document.getElementById("div"); 
    var a = document.getElementById("anchor"); 
    div.addEventListener("mousedown", mouseDown); 
    document.body.addEventListener("mouseup", mouseUp); 

}());

отредактированный espacarellos код, чтобы он работает для анкеров с HREF тоже.

источник

2014-12-10 15:01:32 avantimaestro

Событие с событием с javascript

ответ

Смежные вопросы