javascript - onchange 和 oncontextmenu 与 onclick 不一样

Question

//Main Function to Fire
document.getElementById("div").onchange = function(){
  alert("Changed");
}

//Manipulative Functions
document.getElementById("chklabel").onclick = function(){
  document.getElementById("inp").value = 'Clicked';
}

document.getElementById("chklabel").oncontextmenu = function(ev){
  ev.preventDefault();
  if (document.getElementById("chk").checked == true) {
    document.getElementById("chk").checked = false;
  } else {
    document.getElementById("chk").checked = true;
  }
  document.getElementById("inp").value = 'Context';
}

<div id="div">
  <label id="chklabel" for="chk">Checkbox Toggle</label>
  <input id="chk" type="checkbox">
  <input id="inp" type="text">
</div>

我想要做的是，在这种情况下，当选中或未选中的情况下通过复选框更改 div 时，alert("Changed") 这里的问题是

• 左键单击标签 -> 复选框(已选中) -> 警报(“已更改”)；
• 左键单击标签 -> 复选框(未选中) -> 警报(“已更改”)；

但是右键单击

• 右键单击标签 -> 复选框(已选中) -> 无
• 右键单击标签 -> 复选框(未选中) -> 无

但我想要右键单击更改来切换 div onchange 和警报

Answer 1

在这种情况下，您可以使用 dispatchEvent 手动触发事件

document.getElementById("div").dispatchEvent(new Event("change"));

//Main Function to Fire
document.getElementById("div").onchange = function(){
  alert("Changed");
}

//Manipulative Functions
document.getElementById("chklabel").onclick = function(){
  document.getElementById("inp").value = 'Clicked';
}

document.getElementById("chklabel").oncontextmenu = function(ev){
  ev.preventDefault();
  if (document.getElementById("chk").checked == true) {
    document.getElementById("chk").checked = false;
    document.getElementById("div").dispatchEvent(new Event("change"));
  } else {
    document.getElementById("chk").checked = true;
    document.getElementById("div").dispatchEvent(new Event("change"));
  }
  document.getElementById("inp").value = 'Context';
}

<div id="div">
  <label id="chklabel" for="chk">Checkbox Toggle</label>
  <input id="chk" type="checkbox">
  <input id="inp" type="text">
</div>