javascript - 在超时函数中触发 click() 事件

Question

我的用户界面有一个双用途按钮，点击它应该会打开一个小调色板，或者在按住 500 毫秒时会打开一个完整的 RGB 颜色选择器(一个 HTML5 颜色输入元素)。

这样一个按钮的实现很简单:mousedown 事件设置一个计时器，当它到期时触发 fnHold； mouseup 事件清除计时器并在 fnHold 尚未被触发时触发 fnClick； mouseleave 事件清除计时器并且不执行任何操作。

我的示例代码在这里:http://jsfiddle.net/vwoof2a5/1/ (在这个例子中，按钮在被点击或按住时应该做同样的事情)。

  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();
  });
});

不幸的是，这并不适用于所有浏览器。 Chromium 没有问题，但是 Firefox 在按住按钮时不会打开颜色选择器。它确实运行了定时器功能，但是 $('#color').click() 只是没有通过。

我不确定这是安全功能(不允许定时器功能触发点击)还是其他问题，我不知道如何解决它。是否有另一种方式来打开不依赖于 click() 的选择器？

可以通过比较 mouseUp 上的时间来完全避免计时器，但这会迫使用户决定按住按钮的时间长短，而且不太方便。

编辑:Chromium 也不这样做；早先的结果可能是侥幸。

Edit2:Chromium 的 react 令人困惑。正如 James Montagne 所指出的，hold-event 在页面加载后或在常规点击测试后第一次不工作，但此后工作正常。

Answer 1

我不是事件专家，但使用 $(selector).trigger('click') 触发点击和 $(selector).on('click') 定义处理程序可能更幸运。

我通常使用所有 jQuery 或所有原始 JS，这样这些问题就不会发生。

如果这些有效，我很感兴趣。