Fatal编程技术网
  • javascript/
  • 在javascript中一次使用多个mouseevent

在javascript中一次使用多个mouseevent

javascript css html html5-canvas

在javascript中一次使用多个mouseevent,javascript,css,html,html5-canvas,Javascript,Css,Html,Html5 Canvas,我是实习前端开发人员，正在进行一些演示。 它适用于onclick鼠标事件，但不适用于onclick和onmouseover。我需要一个onclick选项和一个onclick+mouseover选项 这是我的html文件： <html> <head> <link rel="stylesheet" type="text/css" href="MyStyle.css"> <script src

我是实习前端开发人员，正在进行一些演示。
它适用于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>
和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作为
+
&
-
？

如果单击按钮，它也会增加

谢谢。

我不知道您在哪里添加活动

如果要添加事件输入

第一步。更改ID

<input id="btnIncr" type="button" value=" + " onclick="incr()">
我希望你将此功能工作

当然，你是说这种实现方式吗？onclick和mouseover在哪里有相同的方法

（更新代码如下） 我现在理解了您的问题，对于这种情况，我使用onmousedown和onmouseup+间隔实现

请检查以下内容：

var-can，ctx，hun，n=0；
var定时器=null；
函数init（）{
can=document.getElementById（“can”）；
ctx=can.getContext（“2d”）；
hun=document.getElementById（“百”）；
显示（）；
}
函数显示（）{
ctx.fillStyle=“rgb（64255,64）”；
ctx.textAlign=“中心”；
ctx.textb基线=“中间”；
ctx.font=“24pt Helvetica”；
ctx.clearRect（0，0，罐宽，罐高，99）；
ctx.fillText（n，can.width/2，can.height/2）；
}
函数incr（）{
n++；
显示（）；
}
函数decr（）{
n--；
显示（）；
}
函数sethunted（）{
n=匈奴值；
显示（）；
}
函数设置计时器（类型）{
计时器=设置间隔（函数（）{
如果（类型=='incr'）{
增量（）；
}否则{
decr（）；
}
}, 200);
}
函数removeTimer（）{
清除间隔（计时器）；
}
#btn，#百{
字体：粗体较大；
边界半径：25px；
}
帆布{
背景色：黑色；
边框：1px实心rgb（64255,64）；
边界半径：25px；
}



0
100
-100
您是否尝试在按钮中添加onmouseover事件？我真的不明白这个问题。你应该使用而不是在HTML中设置属性。@Dencio。。。先生，我试过了
@ChathurangaNanayakkara您是否真的在（单击鼠标上方）上编写了
这样的属性
？如果是这样的话，那就是你的问题了…@ChathurangaNanayakkara不，我的意思是在按钮元素中添加onmouseover。先生，我试着这样做，我不想只在mouseover上发生，而是想在onclick和onmouse上都发生over@ChathurangaNanayakkara为什么要在onclick和onmouseover期间增加或减少？如果在这种情况下，onclick事件是足够的，这就是为什么我对这个问题感到困惑XD@ChathurangaNanayakkara老兄，我试着更新代码，如果你想的话，按一下就会增加。请试试这个snippet@ChathurangaNanayakkara你试过上面的代码了吗？如果它对你有用，那就没关系了。 
<input id="btnIncr" type="button" value=" + " onclick="incr()">

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