在超时函数中触发click（）事件

Question

My user interface has a dual-use button that should open a small color palette when clicked, or a full RGB color selector (an HTML5 color input element) when held down for 500ms.

The implementation for such a button is straightforward: The mousedown event sets a timer that triggers fnHold when it expires; the mouseup event clears the timer and triggers fnClick if the fnHold hasn't been triggered yet; the mouseleave event clears the timer and does nothing.

My example code is here: http://jsfiddle.net/vwoof2a5/1/ (in this example, the button should do the same thing when it is clicked or held down).

  var mouseHold = function(element, duration, fnHold, fnClick) {
    var timeout = 0;
    var held = false;
    fnHold = fnHold.bind(element);
    fnClick = fnClick.bind(element);

    element.on({
      mousedown: function() {
        timeout = setTimeout(function() {
          held = true;
          fnHold();
        }, duration);
      },
      mouseup: function() {
        clearTimeout(timeout);
        if (!held) fnClick();
        held = false;
      },
      mouseleave: function() {
        clearTimeout(timeout);
        held = false;
      }
    });
  };


$(document).ready(function() {
  mouseHold($('#holder'), 500, function() {
    $('#log').append("<p>Hold event</p>");
    $('#color').click();
  }, function() {
    $('#log').append("<p>Click event</p>");
    $('#color').click();
  });
});

Unfortunately, this doesn't work in all browsers. Chromium has no problem, but Firefox doesn't open the color selector when the button is held. It does run the timer function, but the $('#color').click() just doesn't go through.

I'm not sure if this is a security feature (not allowing timer functions to trigger a click) or something other problem, and I don't know how to work around it. Is there another way to open the selector that doesn't depend on click()?

The timer could be avoided entirely by comparing times on mouseUp, but that forces users to decide how long to hold down the button, and is less convenient.

Edit: Chromium doesn't do it either; the earlier result might have been a fluke.

Edit2: Chromium's reaction is confusing. As pointed out by James Montagne, the hold-event does not work the first time after the page has loaded or the first time after the regular click has been tested, but works normally thereafter.

Answer 1

I am not an expert on Events, but you may have more luck using $(selector).trigger('click') to trigger the click and $(selector).on('click') to define the handler.

I generally use all jQuery or all raw JS so that these issues don't happen.

I am interested if these work.