如果在 contextmenu 事件中调用输入类型颜色单击事件失败答案

【问题标题】：Input type color click event fails if called within contextmenu event如果在 contextmenu 事件中调用输入类型颜色单击事件失败
【发布时间】：2016-01-27 16:38:09
【问题描述】：

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

我有一个网络应用程序，我想允许我的用户更改某些 div 的背景颜色。为此，我想使用颜色选择器界面，并且我想在目标 div 上使用contextmenu 事件来打开它，因为它们已经附加了另一个行为到点击事件。

所以想法是在屏幕中隐藏输入类型颜色，将其点击事件附加到目标 div 上的contextmenu 事件，并在输入类型颜色更改事件上更改目标 div 的背景颜色。

有趣的事情是，当我尝试链接事件时，如果从 contextmenu 事件处理程序中调用它的点击事件，颜色选择器不会打开，但如果从点击中调用它会打开事件。

使用 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 事件处理程序中调用），而输入类型 color 中的事件不会触发。

但如果您直接点击中间输入类型文本，颜色选择器就会打开！

//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 的事件处理问题（我没有尝试启动事件我自己还没有）。

https://jsfiddle.net/bardobrave/0z6ev4rd/1 如果你点击“开火！”颜色选择器会打开，但如果您右键单击它，颜色选择器不会打开，即使您单击输入类型文本也会打开。

有人可以就此事提供一些见解吗？

【问题讨论】：

好吧，看来HTML5颜色选择器只响应click事件，不能被其他事件触发。修补你的小提琴，你可以看到一切都火了：jsfiddle.net/Twisty/0z6ev4rd/2 但由于它不是点击事件，所以选择器不会打开。因此，如果您想让自己创建一个菜单，然后单击颜色选项，这将起作用。

标签： javascript jquery event-handling jquery-events color-picker

【解决方案1】：

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

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

这可能是一些简单的东西，比如包装在 div 中的 List，或者更复杂的东西，比如 JQuery UI Menu。

<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>

现在用户有东西要click，可以结转：

$("#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();
  }
});

我还没有找到关于 HTML5 input type='color' 的所有详细信息。这是一个好的开始：https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29 我怀疑由于颜色选择器对话框是由浏览器本身以及上下文菜单生成的，我猜它是防止它被右键单击触发的安全或控制功能事件类型。

【讨论】：

【解决方案2】：

好的，我找到了修复该功能的方法。

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

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

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

然后，将颜色输入点击事件附加到这个隐藏的 div 点击事件。

来自另一个点击事件，颜色选择器正确打开，你已经强迫你的用户多点击一次（一次右键打开假上下文菜单，另一次打开去颜色选择器），但是功能最终奏效，与所寻求的效果相当一致。

真正的问题仍然适用：

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

【讨论】：

【解决方案3】：

某些 DOM 事件需要以编程方式触发用户交互，即您只能在处理其他一些 click 或 keyup 等的过程中以编程方式触发 click。

【讨论】：