如果在contextmenu事件中调用输入类型的颜色点击事件失败

好吧，这是非常棘手的，所以我会尽力解释它。如果在contextmenu事件中调用输入类型的颜色点击事件失败

我有一个web应用程序，我想，让我的用户更改一些div的背景色。要做到这一点，我想使用颜色选择器界面，并且我想在目标div上使用contextmenu事件来打开它，因为它们已经具有另一个附加到click事件的行为。

这样的想法是有一个输入型的颜色隐藏在屏幕上，附上其Click事件对目标的div contextmenu事件，改变目标的div的背景颜色输入型彩色变化的事件。

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

使用jQuery代码简单和cleariness

//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的一个问题（我的错误还没有尝试自己发起这些事件）。

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

来源

2016-01-27 Bardo

你能做出这个的jsfiddle所以我们可以看到你在做什么的例子？这个问题有点模糊，现在也没有联系。 – Twisty

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

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

因此，要执行自己的上下文菜单中，你可能要绑定到以下几点：

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

来源

2016-01-28 17:45:19 Twisty

好的，我找到了解决这个功能的方法。

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

作为该事件不能调用输入型彩色点击事件（原因不明），一种可行的解决方案是增加一个隐藏的div其上鼠标位置当弹出上下文菜单事件被称为目标的div。

这个隐藏的div伪装成一个快捷菜单，可以包括一个消息：“点击打开拾色器”或类似的东西。

然后，您将色彩输入点击事件，这个隐藏的div单击事件。

从另一个点击事件开始，颜色选择器可以正确打开，您已经强制用户进行一次点击超出所需（一个右键单击以打开假上下文菜单，另一个单击以打开de颜色选择器），但功能最终能够发挥作用，并且与所寻求的效果非常一致。

真正的问题仍然适用：

为什么输入型彩色点击事件触发时，从任何其他点击事件处理函数中调用，但如果上下文菜单事件处理程序中，从所谓的失败？

来源

2016-01-28 08:18:28 Bardo

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

来源

2017-10-28 10:21:46 Alex

如果在contextmenu事件中调用输入类型的颜色点击事件失败

回答

相关问题