JavaScript习题（创建一个绿色小方块，如果是点击就变红色，如果是拖曳就不变色）

中国的流浪猫

于 2020-07-01 14:05:57 发布

阅读量358

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46611729/article/details/107062740

版权

问题是如何区分点击和拖曳？答案：运用时间戳

以下是html页面的代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国的流浪猫</title>
    <link rel="stylesheet" type="text/css" href="regality.css">
</head>

<body>
    <div style="width: 200px;height: 200px;background-color: green;"> </div>
    <script type="text/javascript" src="lesson.js"> </script>
</body>

</html>

以下是JavaScript页面的代码：

var div = document.getElementsByTagName('div')[0];
var firstTime = 0;
var lastTime = 0;
 var key = false;
document.onmousedown = function() {
	firstTime = new Date().getTime();
}

document.onmouseup = function(){
	lastTime = new Date().getTime();
	if ( lastTime - firstTime < 300 ) {
		key = true;
	}
}

document.onclick = function(){
	if (key) {
		div.style.backgroundColor = 'red'
		key = false;
	}

}