Question

我目前使用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
}

Answer 1

YUI有一个名为Synthetic events的概念。这些事件是伪造的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 App Framework使用事件委派，因此您必须为合成事件添加对事件委派的支持。我建议您阅读Event User Guide的“综合事件”部分，然后按照Creating an Arrow Event for DOM subscription示例进行操作。

设置完活动后，您应该可以像在其他任何活动中一样在应用框架中使用它：

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

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

1 个答案: