0

I currently write project using YUI(app framework). A have some actions for each elements( going to another page, clear etc.). I want to add long press action to each button. Unfortunately YUI doesn't support this kind of stuff. I found solution in 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; 
});

And here is my question. How to add this feature to my current code? Writing new function doesn't work, so does adding this code to existing function.

//edited My code looks like this:

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

And then there is select function:

select: function (e) {
//code
}
4

1 回答 1

1

YUI 有一个称为合成事件的概念。这些事件是您定义的假 DOM 事件，其行为方式与$(foo).trigger('myFooEvent')jQuery 中类似。定义合成事件只是调用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的 Synthetic Events 部分并遵循为 DOM 订阅示例创建箭头事件。

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

events: {
  '.button': {
    'longpress': fn
  }
}
于 2013-06-14T15:05:14.467 回答