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

Question

This is pretty tricky, so I'll try to explain it well.

I have a web app where I want to allow my users to change background color of some divs. To do so I'd like to use a color picker interface, and I want to use contextmenu event on target divs to open it, as they already have another behaviour attached to click event.

So the idea is to have an input type color hidden in the screen, attach its click event to contextmenu event on target divs and change background color of target divs on input type color change event.

The funny thing is that when I try to chain events, color picker doesn't open if its click event is called from within contextmenu event handler, but it does if called from within click event.

Using jQuery for code simplicity and clearness:

//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 most weird fact is that, if I use a third element to pass the event, say, for example that I call to an intermediate input type text which passes the call from myTargetDiv to inputTypeControl , the click event in the intermediate element fires (even when called from within contextmenu event handler) while the event in the input type color doesn't fire.

But if you click directly on the intermediate input type text the color picker opens!

//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");
});

I've reproduced this behaviour in Firefox and Chrome, and I'm not very sure if it's an expected feature, a bug in browsers input type color implementation or a problem with event handling from jQuery (I haven't tried launching the events myself yet).

https://jsfiddle.net/bardobrave/0z6ev4rd/1 If you click on "FIRE!" the color picker opens, but if you right click on it the color picker doesn't opens despite if you click on input type text it does.

Anyone can give some insight on the matter?

Answer 1

Ok, I've found a way to fix the functionality.

To trigger color picker opening through a div context menu event.

As this event cannot call the input type color click event (for reason unknown), a feasible solution is to add a hidden div which pops on mouse position when context menu event is called on target div.

This hidden div poses as a context menu and can include a message: "click to open color picker" or something like that.

Then, you attach color input click event to this hidden div click event.

Coming from another click event, the color picker opens correctly, you've forced your user to make one click more than desired (one right click to open the fake context menu and another one to open de color picker), but functionality works in the end and it's quite consistent with the effect seeked.

The real question still applies:

Why input type color click event fires when called from within any other click event handler but fails if called from within context menu event handler?

Answer 2

So to execute your own contextual menu, you may want to bind to the following:

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

This could be something simple like a List wrapped in a div, or more complex like 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>

Now the user has something to click on, which can be 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();
      // Do something else
      break;
    default:
      $("#menu").hide();
  }
});

I have not found all the details on the HTML5 input type='color' . This is a good start: https://www.w3.org/TR/html5/forms.html#color-state-%28type=color%29 I suspect that since the Color Picker dialog is generated by the browser itself as well as a Contextual Menu, I am guessing it's a security or control feature that is preventing it being triggered by a Right-Click type of event.

Answer 3

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