event.preventDefault() не останавливает запуск кода

У меня есть следующий HTML страницы и следующий JavaScript:event.preventDefault() не останавливает запуск кода

страница должна отображать изображение в случайном месте и обновлять его каждые 4 секунды (заставка страница). Если не обнаружено никакого действия мыши или касания планшета (следовательно, прослушиватели событий добавлены на странице настроек), действие продолжается навсегда. Он отлично работал, пока я не изменил функцию goActive, чтобы добавить линию window.open("index.html"). Теперь проблема заключается в том, что скринсейвер никогда не отображается, и он сразу же следует за следующей инструкцией, чтобы открыть страницу index.html. Я думал, что добавление строки event.preventDefault решит мою проблему.

Любая идея, что я делаю неправильно на данном этапе?

function init() { 
 
\t var xmin = 0; 
 
\t var xmax = 890; 
 
\t var ymin = 0; 
 
\t var ymax = 430; 
 

 
\t var xCoord = Math.floor((Math.random()*xmax)+xmin); 
 
\t var yCoord = Math.floor((Math.random()*ymax)+ymin); 
 

 
\t var xCoordStr = xCoord.toString() + "px"; 
 
\t var yCoordStr = yCoord.toString() + "px"; 
 

 
\t document.getElementById("randomPlacement").style.left = xCoordStr; 
 
\t document.getElementById("randomPlacement").style.top = yCoordStr; 
 

 
\t document.getElementById("date").innerhtml=getDate('date'); 
 
\t document.getElementById("time").innerhtml=getTime('time'); 
 
} 
 
function setup() { 
 
\t this.addEventListener("mousemove", exitScreenSaver, false); 
 
\t this.addEventListener("mousedown", exitScreenSaver, false); 
 
\t this.addEventListener("keypress", exitScreenSaver, false); 
 
\t this.addEventListener("DOMMouseScroll", exitScreenSaver, false); 
 
\t this.addEventListener("mousewheel", exitScreenSaver, false); 
 
\t this.addEventListener("touchmove", exitScreenSaver, false); 
 
\t this.addEventListener("MSPointerMove", exitScreenSaver, false); 
 
} 
 

 
function exitScreenSaver(e) { 
 
\t goActive(); 
 
} 
 

 
function goActive() { 
 
// do something 
 
\t console.log(".. active .."); 
 
\t event.preventDefault(); 
 
\t window.open("index.html","_self"); 
 
}

/* Page entière (utilisé pour avoir une couverture globale en couleur) */ 
 
body { 
 
    background-color:black; /*screensaver mode*/ 
 
} 
 

 
/* Affichage de date (en haut) */ 
 
#date{ 
 
    font-family:Arial; 
 
    font-size: 130%; 
 
    font-weight: 800; 
 
    text-align: left; 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 20px; 
 
    color:white;  /* screensaver mode*/ 
 
} 
 

 
/* Affichage d'heure (en haut) */ 
 
#time{ 
 
    font-family:Arial; 
 
    font-size: 130%; 
 
    font-weight: 800; 
 
    text-align: left; 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 300px; 
 
    color:white;  /* screensaver mode*/ 
 
} 
 
/* Affichage de la température */ 
 
#tag_temperature{ 
 
    font-family:Arial; 
 
    font-size: 130%; 
 
    font-weight: 800; 
 
    text-align: left; 
 
    position: fixed; 
 
    top: 5px; 
 
    left: 600px; 
 
    color:black;  /* night mode*/ 
 
    color:blue;   /* day mode*/ 
 
    color:white;  /* screensaver mode*/ 
 
} 
 

 
p {margin: 0;}

<!DOCTYPE html> 
 
<!-- 
 
\t Page d'économiseur d'écran, créée le 30.07.2016 
 
\t modifiée le 02.09.2016 
 
\t modifiée le 22.10.2016 (no cache) 
 
\t modifiée le 23.10.2016 (inclusion de la date et de l'heure) 
 
--> 
 
<html> 
 
<head> 
 
\t <title>Domoos | Screen saver screen</title> 
 
\t <meta http-equiv="refresh" content="4"> 
 
\t <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> 
 
\t <meta http-equiv="pragma" content="no-cache"> 
 
\t <link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" /> 
 
\t <script type="text/javascript" src="scripts/date_time.js"></script> 
 
\t <script type="text/javascript" src="scripts/screensaver.js"></script> 
 
</head> 
 
<body onload="init(); setup();"> 
 
\t <div style="position:absolute" id="randomPlacement"> 
 
\t \t <p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p> 
 
\t </div> 
 
\t <div id="date"></div> 
 
\t <div id="time"></div> 
 
\t <div id="tag_temperature"> 
 
\t \t <p>?&deg;C</p> 
 
\t </div> 
 
</body> 
 
</html>

источник

2016-10-24 Laurent

Я думаю, вы не определили функцию getDate –

функции getDate и getTime встроены в другой javascript, который я забыл заключить в фрагмент:/ – Laurent

'event' не определен. –

Просто передайте параметр е функции goActive

function exitScreenSaver(e) { 
    goActive(e); 
} 

function goActive(event) { 
    // do something 
    console.log(".. active .."); 
    event.preventDefault(); 
    window.open("index.html","_self"); 
}

источник

2016-10-24 19:55:46

Mate, я тиражирование код, играл с ним на некоторое время. Сценарий работает нормально. У вас есть некоторые мелочи:

-Вы объявляете функции после их вызова.

-Прокат объекта 'e', а не его использование.

-Использование .html to call init() & setup(). Вместо window.addEventListener('load', init, false);

Основная проблема заключается в том, что вы, вероятно, удалили заявления в goActive(). Эта функция работает, но просто набирает ...active... в консоли и открывает другую страницу, нет дополнительной функциональности, потому что она не написана!

источник

2016-10-24 20:29:50 adr1Script

Большое спасибо за все ваши ценные материалы. Я весьма признателен. Любой намек на улучшение реагирования, особенно на планшете? – Laurent

Все нормально. Я предпочитаю использовать процентные значения и @media-запросы, чтобы избежать таких вещей, как «500px», «800px», поскольку это работает по-разному для разных разрешений. – adr1Script

Тысячи благодарностей. Вы сделали мой день :-) – Laurent

event.preventDefault() не останавливает запуск кода

ответ

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