javascript - input type color click event fails if called within contextmenu event -

ok, pretty tricky, i'll try explain well.

i have web app want allow users change background color of divs. i'd use color picker interface, , want use contextmenu event on target divs open it, have behaviour attached click event.

so idea have input type color hidden in screen, attach click event contextmenu event on target divs , change background color of target divs on input type color change event.

the funny thing when try chain events, color picker doesn't open if click event called within contextmenu event handler, if called within click event.

using jquery code simplicity , 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; }); 

the weird fact that, if use third element pass event, say, example call intermediate input type text passes call mytargetdiv inputtypecontrol, click event in intermediate element fires (even when called within contextmenu event handler) while event in input type color doesn't fire.

but if click directly on intermediate input type text color picker opens!!!

//if right click on mytargetdiv "firing!" appears on console, color picker doesn't opens $("#mytargetdiv").on("contextmenu", function() {     $("#intermediateelement").trigger("click");     return false; });  //if click on intermediateelement, however, color picker opens!!! $("#intermediateelement")on("click", function() {     console.log("firing!");     $("#inputtypecolor").trigger("click"); }); 

i've reproduced behaviour in firefox , chrome, , i'm not sure if it's expected feature, bug in browsers input type color implementation or problem event handling jquery (i haven't tried launching events myself yet).

anyone can give insight on matter?

so execute own contextual menu, may want bind following:

  $("#firestarter").on("contextmenu", function(e) {     // execute menu color picker option     return false;   }); 

this simple list wrapped in div, or more complex 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 default</li>   </ul> </div> 

now user has click on, can carried over:

$("#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();       // else       break;     default:       $("#menu").hide();   } }); 

i have not found details on html5 input type='color'. start: https://www.w3.org/tr/html5/forms.html#color-state-%28type=color%29 suspect since color picker dialog generated browser contextual menu, guessing it's security or control feature preventing being triggered right-click type of event.