Javascript 如果在contextmenu事件中调用，则输入类型颜色单击事件失败

这很棘手，所以我会尽力解释清楚

我有一个网络应用，我想让我的用户改变一些div的背景颜色。为此，我想使用一个颜色选择器界面，我想在目标div上使用

contextmenu

event来打开它，因为它们已经在click event上附加了另一个行为

因此，我们的想法是在屏幕中隐藏一个输入类型颜色，将其单击事件附加到目标div上的

contextmenu

事件，并在输入类型颜色更改事件中更改目标div的背景颜色

有趣的是，当我尝试链接事件时，如果从

contextmenu

事件处理程序中调用其click事件，则颜色选择器不会打开，但如果从click事件中调用，则会打开

使用jQuery实现代码的简单性和清晰性：

//this works perfectly, color picker opens
$("#myTargetDiv").on("click", function() {
    $("#inputTypeColor").trigger("click");
});

//this fails miserably
$("#myTargetDiv").on("contextmenu", function() {
    $("#inputTypeColor").trigger("click");
    return false;
});

最奇怪的事实是，如果我使用第三个元素传递事件，例如，我调用一个中间输入类型文本，该文本将调用从

myTargetDiv

传递到

inputTypeControl

，中间元素中的click事件将触发（即使从

contextmenu

eventhandler中调用）而输入类型颜色中的事件不会触发

但如果直接单击中间输入类型文本，则颜色选择器将打开！

//If you right click on myTargetDiv "firing!" appears on console, but color picker doesn't opens
$("#myTargetDiv").on("contextmenu", function() {
    $("#intermediateElement").trigger("click");
    return false;
});

//If you click on intermediateElement, however, the color picker opens!!!
$("#intermediateElement")on("click", function() {
    console.log("firing!");
    $("#inputTypeColor").trigger("click");
});

我已经在Firefox和Chrome中重现了这种行为，我不确定这是一个预期的功能，是浏览器输入类型颜色实现中的错误，还是来自jQuery的事件处理问题（我自己还没有尝试启动事件）

如果您单击“FIRE！”将打开颜色选择器，但如果您右键单击它，则颜色选择器不会打开，尽管您单击“input type text”，它会打开

---

任何人都可以对这件事给出一些见解吗？

好的，我已经找到了修复功能的方法

通过div上下文菜单事件触发颜色选择器打开

由于此事件无法调用输入类型的颜色单击事件（原因未知），可行的解决方案是添加一个隐藏的div，当在目标div上调用上下文菜单事件时，该div会在鼠标位置弹出

这个隐藏的div充当上下文菜单，可以包含一条消息：“单击以打开颜色选择器”或类似的内容

然后，将颜色输入单击事件附加到此隐藏的div单击事件

来自另一个单击事件，颜色选择器正确打开，您已强制用户进行一次超出预期的单击（一次右键单击打开假上下文菜单，另一次右键单击打开反颜色选择器），但功能最终起作用，并且与所寻求的效果完全一致

真正的问题仍然存在：

---

为什么从任何其他单击事件处理程序中调用时会触发输入类型颜色单击事件，但从上下文菜单事件处理程序中调用时会失败？

因此，要执行您自己的上下文菜单，您可能需要绑定到以下项：

  $("#firestarter").on("contextmenu", function(e) {
    // Execute your menu with Color Picker Option
    return false;
  });

这可以是简单的东西，比如包装在div中的列表，也可以是更复杂的东西，比如jqueryui菜单

<div id="menu">
  <ul>
    <li class="menuItem" id="menuOption-1" data-action="color" data-rel="#myColor">Select Color</li>
    <li class="menuItem" id="menuOption-2" data-action="reset">Reset to Default</li>
  </ul>
</div>

---

我还没有找到HTML5

input type='color'

的所有详细信息。这是一个好的开始：我怀疑，由于颜色选择器对话框是由浏览器本身以及上下文菜单生成的，我猜这是一个安全或控制功能，防止它被右键单击类型的事件触发。

事件要求以编程方式触发用户交互，即，只有在处理其他

单击

或

键控

等过程中，才能以编程方式触发

单击

。

确定，因此HTML5颜色选择器似乎只响应

单击

事件，不能被其他事件触发。Tin在你的小提琴里，你可以看到所有的东西都在燃烧：但因为这不是一个点击事件，所以选择器不会打开。因此，如果你想让自己成为一个创建的菜单，然后点击颜色选项，这就行了。

$("#menu li.menuItem").on("click", function(){
  switch($(this).data("action")){
    case "color":
      $("#menu").hide();
      var target = $(this).data("rel");
      $(target).trigger("click");
      break;
    case "reset":
      $("#menu").hide();
      // Do something else
      break;
    default:
      $("#menu").hide();
  }
});