如果在上下文菜单事件中调用，则输入类型颜色单击事件失败

Question

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

我有一个 Web 应用程序，我希望我的用户可以在其中更改某些 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 事件处理程序中调用），而输入类型颜色中的事件不会触发。

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

//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 中重现了这种行为，但我不太确定这是预期的功能、浏览器输入类型颜色实现中的错误还是来自 [= 的事件处理问题46=]（我还没有尝试自己发起活动）。

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

任何人都可以就此事提供一些见解吗？

Answer 1

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

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

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

这个隐藏的 div 伪装成上下文菜单并且可以包含一条消息："click to open color picker" 或类似的东西。

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

来自另一个点击事件，颜色选择器正确打开，你已经强迫你的用户点击超过预期（一次右击打开假上下文菜单，另一个打开颜色选择器），但功能最终起作用，并且与寻求的效果非常一致。

真题依然适用：

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

Answer 2

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

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

这可能是一些简单的东西，比如包裹在 div 中的列表，或者更复杂的东西，比如 JQuery UI 菜单。

<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 我怀疑由于拾色器对话框是由浏览器本身以及上下文菜单生成的，我猜这是一种安全或控制功能，可以防止它被右键触发-点击事件类型。

Answer 3

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

如果在上下文菜单事件中调用，则输入类型颜色单击事件失败

Input type color click event fails if called within contextmenu event

javascript

jquery

color-picker

event-handling

jquery-events