YUI + jQuery 长按动作和默认点击答案

【问题标题】：YUI + jQuery long press action and default clickYUI + jQuery 长按动作和默认点击
【发布时间】：2013-06-14 13:08:34
【问题描述】：

我目前使用 YUI（应用程序框架）编写项目。 A 对每个元素都有一些操作（转到另一个页面，清除等）。我想为每个按钮添加长按动作。不幸的是，YUI 不支持这种东西。我在 jQuery 中找到了解决方案：

 var pressTimer

$("a").mouseup(function(){
  clearTimeout(pressTimer)
  // Clear timeout
  return false;
}).mousedown(function(){
  // Set timeout
  pressTimer = window.setTimeout(function() { ... your code ...},1000)
  return false; 
});

这是我的问题。如何将此功能添加到我当前的代码中？编写新函数不起作用，将此代码添加到现有函数中也是如此。

//已编辑我的代码如下所示：

//stuff
events: {
'.button': {
click: 'select'
}
},

然后是选择功能：

select: function (e) {
//code
}

【问题讨论】：

你能更清楚你在问什么吗？顺便说一句，该功能有效，这就是您要问的
通常我不知道如何将这个长按与我现有的代码联系起来。我忘了写我正在使用事件（如果有帮助的话）。编写新事件并没有解决我的问题。
你能添加这样的自定义事件吗？ jsfiddle.net/NbJPq/2。或者使用 trigger('click') 来触发你的事件 click

标签： jquery frameworks yui

【解决方案1】：

YUI 有一个称为合成事件的概念。这些事件是您定义的假 DOM 事件，其行为方式与 jQuery 中的 $(foo).trigger('myFooEvent') 类似。定义合成事件只需调用Y.Event.define()。在您的情况下，它看起来像这样：

Y.Event.define('longpress', {
  on: function (node, sub, notifier) {
    var timeout;

    sub._downHandle = node.on('mousedown', function (e) {
      timeout = setTimeout(function () {
        notifier.fire('longpress', {domEvent: e});
      }, 1000);
    });
    sub._upHandle = node.on('mouseup', function () {
      clearTimeout(timeout);
    });
  },
  detach: function (node, sub) {
    sub._downHandle.detach();
    sub._upHandle.detach();
  }
});

定义合成事件后，您只需调用node.on('myevent') 即可使用它。例如：Y.one('#foo').on('longpress', fn)。

YUI 应用程序框架使用事件委托，因此您必须为合成事件添加对事件委托的支持。我建议您阅读Event User Guide 的合成事件部分并遵循Creating an Arrow Event for DOM subscription 示例。

设置您的事件后，您应该可以像使用其他任何事件一样在应用程序框架中使用它：

events: {
  '.button': {
    'longpress': fn
  }
}

【讨论】：