Question

我有以下html页面和以下javascript：

页面应该在随机位置显示图片并每4秒刷新一次（屏幕保护页面）。如果未检测到鼠标操作或平板电脑触摸（因此在设置页面中添加了事件侦听器），则操作将永久继续。它已经完全正常，直到我修改goActive函数以添加window.open("index.html")行。现在的问题是屏幕保护程序永远不会显示，它会紧跟下一条指令打开index.html页面。我认为添加行event.preventDefault可以解决我的问题。

知道我在这个阶段做错了什么？

function init() {
	var xmin = 0;
	var xmax = 890;
	var ymin = 0;
	var ymax = 430;

	var xCoord = Math.floor((Math.random()*xmax)+xmin);
	var yCoord = Math.floor((Math.random()*ymax)+ymin);

	var xCoordStr = xCoord.toString() + "px";
	var yCoordStr = yCoord.toString() + "px";

	document.getElementById("randomPlacement").style.left = xCoordStr;
	document.getElementById("randomPlacement").style.top = yCoordStr;

	document.getElementById("date").innerhtml=getDate('date');
	document.getElementById("time").innerhtml=getTime('time');
}
function setup() {
	this.addEventListener("mousemove", exitScreenSaver, false);
	this.addEventListener("mousedown", exitScreenSaver, false);
	this.addEventListener("keypress", exitScreenSaver, false);
	this.addEventListener("DOMMouseScroll", exitScreenSaver, false);
	this.addEventListener("mousewheel", exitScreenSaver, false);
	this.addEventListener("touchmove", exitScreenSaver, false);
	this.addEventListener("MSPointerMove", exitScreenSaver, false);
}

function exitScreenSaver(e) {
	goActive();
}

function goActive() {
// do something
	console.log(".. active ..");
	event.preventDefault();
	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>
<!-- 
	Page d'économiseur d'écran, créée le 30.07.2016 
	modifiée le 02.09.2016 
	modifiée le 22.10.2016 (no cache) 
	modifiée le 23.10.2016 (inclusion de la date et de l'heure)
-->
<html>
<head>
	<title>Domoos | Screen saver screen</title>
	<meta http-equiv="refresh" content="4">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
	<meta http-equiv="pragma" content="no-cache">
	<link rel="stylesheet" type="text/css" href="css/mystyle_saver.css" />
	<script type="text/javascript" src="scripts/date_time.js"></script>
	<script type="text/javascript" src="scripts/screensaver.js"></script>
</head>
<body onload="init(); setup();">
	<div style="position:absolute" id="randomPlacement">
		<p><a href="index.html"><img src="assets/pictures/texte_sortie_veille.png" alt ="" style="width:60px;height:60px;"></a></p>
	</div>
	<div id="date"></div>
	<div id="time"></div>
	<div id="tag_temperature">
		<p>?&deg;C</p>
	</div>
</body>
</html>

Answer 1

只需将e参数传递给goActive函数

即可

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

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

Answer 2

Mate，我一直在复制你的代码，玩了一段时间。脚本似乎运行正常。但是你有一些小事情：

- 在他们被召唤之后你宣布职能。

- 通过对象＆＃39; e＆＃39;而不是使用它。

- 使用.html致电init()＆amp; setup()。而不是window.addEventListener('load', init, false);

主要问题是您可能删除了goActive()中的语句。该函数运行，但只是在控制台中键入...active...并打开另一个页面，没有额外的功能，因为它没有被写入！

event.preventDefault（）不会阻止代码运行

2 个答案: