Question

好的，这非常棘手，所以我会试着解释一下。

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

因此，我们的想法是在屏幕中隐藏输入类型颜色，将其click事件附加到目标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事件处理程序中调用），而输入类型颜色中的事件不会触发。

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

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

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

Answer 1

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

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

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

这个隐藏的div构成一个上下文菜单，可以包含一条消息：“点击打开颜色选择器”或类似的东西。

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

来自另一个点击事件，颜色选择器正确打开，您强制您的用户点击一次超过所需（一次右击以打开虚假上下文菜单，另一次打开颜色选择器），但功能最终工作，它与所寻求的效果非常一致。

真正的问题仍然适用：

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

Answer 2

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

  $("#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我怀疑由于Color Picker对话框是由浏览器本身以及上下文菜单生成的，我猜测它是一个安全或控制功能，阻止它被右边触发 - 点击事件类型。

Answer 3

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

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

3 个答案: