JavaScript 将变量事件传递给事件侦听器

Question

我正在做一个 canvas 绘画项目，我正在尝试更改事件侦听器的事件类型。例如，用户选择 (i) 单击或 (ii) 鼠标悬停。然后“单击”或“鼠标悬停”作为参数传递给事件侦听器。我已经挠头了一天左右。不确定事件是否不可变。反正我想 post 它。此外，我使用范围作为输入（值为 0 和 1）。任何帮助将不胜感激。

<input type="range" id="state" name="state" min="0" max="1" value="0" onchange="changestate();">

$state = "mousemove";  // Global Variable

function changestate(){
x = document.getElementByID("state").value;

if(x == 1){
      $state = "mousemove";
      } else {
             $state = "click";
}

canvas.addEventListener($state, function (evt) {
      //code
}, false);

Answer 1

您可能必须对两个不同的事件侦听器执行此操作，但您可以将相同的函数传递给它们，然后检查该函数是否为 mouseover 运行代码事件或 click

JS

$state = "mousemove";  // Global Variable

function changestate() {
    x = document.getElementById("state").value;
  if (x == 1) {
    $state = "mousemove";
  } else {
    $state = "click";
  }
}
 
function doSomething(evt) {
  if ($state == 0) {
    // put all the code here for click event
  } else if ($state == 1) {
    // put all the code here for mouseover event
  }
}

window.addEventListener('click', doSomething, false)
window.addEventListener('mouseover', doSomething, false)

Answer 2

最终，以下内容让我找到了我想要的东西。谢谢大家的帮助。

canvas.addEventListener("mousemove", function (evt) {
    var mousestate = document.getElementById("state").value;
    if(mousestate == 0){
                // code
                }
    } else {
         canvas.addEventListener("click", function (evt) {
                //code
             }, false);
           }

}, false);

JavaScript 将变量事件传递给事件侦听器

JavaScript Pass variable event to event listener

javascript

mouseevent

addeventlistener

mouseclick-event