javascript - onchange和oncontextmenu与onclick不同

//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并发出警报

最佳答案

在这种情况下，您可以使用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>

关于javascript - onchange和oncontextmenu与onclick不同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57086107/