在javascript中一次使用多个鼠标事件答案

【问题标题】：Mulitiple mouseevent use in one time in javascript在javascript中一次使用多个鼠标事件
【发布时间】：2018-02-22 06:20:07
【问题描述】：

我是实习前端开发人员，我正在做一些演示。
它适用于 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;
}

我的问题是：

我如何为+ 和- 使用onclick 以及onclick 和onmouseover？

如果点击按下它也会增加

谢谢。

【问题讨论】：

您是否尝试过在按钮中添加 onmouseover 事件？我真的不明白这个问题。
您应该使用 addEventListener() 而不是在 HTML 中设置属性。
@Dencio ...先生我试过了..<input id="btn" type="button" value=" + " onclick="incr()" on(click|mouseover)="incr()" >
@ChathurangaNanayakkara 你真的写了on(click|mouseover)这样的属性吗？如果是这样，那是你的问题......
@ChathurangaNanayakkara 不，我的意思是添加 onmouseover 到按钮元素。

标签： javascript css html html5-canvas

【解决方案1】：

无论如何，你的意思是这种实现吗？ 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>

【讨论】：

先生，我尝试这样，我想发生的不仅仅是 onmouseover，而是 onclick 和 onmouse over
@ChathurangaNanayakkara 为什么要在 onclick 和 onmouseover 期间增加或减少？如果在这种情况下，onclick 事件就足够了
这就是为什么我对这个问题感到困惑 XD
@ChathurangaNanayakkara 伙计，我尝试更新代码，如果单击按下，它会按照您的喜好递增。请尝试sn-p
@ChathurangaNanayakkara 你试过上面的代码了吗？如果它对你有用，那没关系。

【解决方案2】：

我不知道你在哪里添加事件。

如果你想添加事件输入

第一步。更换身份证

<input id="btnIncr" type="button" value=" + " onclick="incr()">

第二步。在 init 函数中添加脚本 MouseEvent 代码

document.getElementById("btnIncr").addEventListener("mouseover", incr());

我希望你能使用这个功能！

【讨论】：