我是实习前端开发人员，我正在做一些演示。
它适用于 onclick 鼠标事件，但不适用于 onclick 和 onmouseover。我需要一个 onclick 选项和一个 onclick + mouseover 选项。
这是我的 html 文件:
<html>
<head>
<link rel="stylesheet" type="text/css" href="MyStyle.css">
<script src="myScript.js"></script>
<title>Main page</title>
</head>
<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br />
<input id="btn" type="button" value=" + " onclick="incr()">
<input id="btn" type="button" value=" - " onclick="decr()">
<select id="hundred" onchange="setHundred()">
<option value=0> 0 </option>
<option value=100> 100 </option>
<option value=-100> -100 </option>
</select>
</body>
</html>
这是我的 Javascript 文件:
var can, ctx, hun, n = 0;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
showN();
}
function showN() {
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
showN();
}
function decr() {
n--;
showN();
}
function setHundred() {
n = hun.value;
showN();
}
和 css 文件:
#btn, #hundred {
font: larger bold;
border-radius: 25px;
}
canvas {
background-color: black;
border: 1px solid rgb(64, 255, 64);
border-radius: 25px;
}
我的问题是:
how I use onclick and both onclick and onmouseover for
+&-?Also it would increment if click pressed
谢谢。
最佳答案
无论如何，你是指这种实现吗？ onclick 和 mouseover 在哪里有相同的方法？
(下面更新了代码) 我现在明白你的问题了，对于那种情况，我正在使用 onmousedown 和 onmouseup + interval 实现。
请检查以下内容:
var can, ctx, hun, n = 0;
var timer = null;
function init() {
can = document.getElementById("can");
ctx = can.getContext("2d");
hun = document.getElementById("hundred");
showN();
}
function showN() {
ctx.fillStyle = "rgb(64, 255, 64)";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.font = "24pt Helvetica";
ctx.clearRect(0, 0, can.width, can.height, 99);
ctx.fillText(n, can.width / 2, can.height / 2);
}
function incr() {
n++;
showN();
}
function decr() {
n--;
showN();
}
function setHundred() {
n = hun.value;
showN();
}
function setTimer(type) {
timer = setInterval(function() {
if (type == 'incr') {
incr();
} else {
decr();
}
}, 200);
}
function removeTimer() {
clearInterval(timer);
}#btn, #hundred {
font: larger bold;
border-radius: 25px;
}
canvas {
background-color: black;
border: 1px solid rgb(64, 255, 64);
border-radius: 25px;
}<body onload="init()">
<canvas id="can" height="100" width="100"></canvas>
<br>
<input id="btnAdd" type="button" value=" + " onclick="incr()" onmousedown="setTimer('incr')" onmouseup="removeTimer()">
<input id="btnDeduct" type="button" value=" - " onclick="decr()" onmousedown="setTimer('decr')" onmouseup="removeTimer()">
<select id="hundred" onchange="setHundred()">
<option value=0> 0 </option>
<option value=100> 100 </option>
<option value=-100> -100 </option>
</select>
</body>关于javascript - 在javascript中一次使用多个鼠标事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48920853/