Question

我的用户界面有一个两用按钮，可以在点击时打开一个小调色板，或者在按住500ms时打开一个完整的RGB颜色选择器（一个HTML5颜色输入元素）。

这样一个按钮的实现非常简单：mousedown事件设置一个计时器，当它到期时触发fnHold; mouseup事件清除计时器并触发fnClick如果尚未触发fnHold; 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的反应令人困惑。正如James Montagne所指出的那样，hold-event在页面加载后第一次不工作，或者在测试常规点击后第一次工作，但此后正常工作。

Answer 1

我不是活动方面的专家，但您可以使用$（选择器）.trigger（'click'）触发点击和$（选择器）.on（'click'）来定义处理程序。

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

如果这些有用，我感兴趣。

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

1 个答案: