Question

我想知道如何在一行中绑定“click”和“touchstart”两个事件：

Engine.on("click"), function(){ aCode() }
Engine.on("touchstart", function(){ aCode() }

我期待这样的事情（因为它在其他一些框架中实现）：

Engine.on("click touchstart", function(e){ aCode() });

我目前的解决方法是将它们链接起来：

Engine.on("click", function(){Engine.emit("touchstart")});
Engine.on("touchstart", function() { aCode() }

这有更好的做法吗？问题是iOS上没有捕获点击，桌面上没有鼠标触摸器......显然我想以任何设备的方式处理事件。

Answer 1

[编辑] 要以相同的方式处理click and touchstart-＆gt; touchend，只需使用 FastClick覆盖填充。

只需添加：

FastClick = require('famous/inputs/FastClick');

然后这也适用于平板电脑：

anElement.on("click", function(){alert("Click caught")})

另一种方法是使用此助手：

function onEvent(source, events, callback)
{
    for (var event in events)
    {
        source.on(events[event], function(e) {
            callback(e);
        });
    }
}

然后：

onEvent(Famous.Engine, ["click","touchstart"],function(){});

Answer 2

Famo.us中的on()方法只接受一种事件类型。它不会执行任何jQuery样式字符串处理来确定单独的事件。理论上你可以有一个名为get to the chopper

的事件

创建自定义视图时我所做的是创建一个bindEvents()函数，它将所有事件侦听器组合在一起。这些处理程序中唯一的代码是其他函数。如果我想以相同的方式对两个不同的事件做出反应，我只是对它们使用相同的功能。

// An example Class demonstrating events - some off-topic parts omitted
function myLovelyHorseButton() {

    // Recomended Reading: https://famo.us/guides/dev/events.html

    this._eventInput = new EventHandler();
    this._eventOutput = new EventHandler();

    this._eventInput.pipe(this.sync);
    this.sync.pipe(this._eventInput);

    EventHandler.setInputHandler(this, this._eventInput);
    EventHandler.setOutputHandler(this, this._eventOutput);

    /** Set options & variables
    /* ...
    */

    // create event listeners for this specific instance
    _bindEvents.call(this);
};

// bind all the events for the button
function _bindEvents() {
    //Call event handlers with this set to owner.
    this._eventInput.bindThis(this);
    // listen for events
    this._eventInput.on('click', _handleClick);
    this._eventInput.on('touchstart', _handleClick);    //Same as 'click'
};

//  Nay to the console on click/touch
function _handleClick(event) {
    console.log('Nayyyyy!!!');
};


// create an instance of myLovelyHorseButton
var button = new myLovelyHorseButton;

// We would then add the button to the Render Tree
mainContext.add(button);

有一个很重要的原因，你不想做你当前使用的链接模式。这是因为通过点击发出触摸启动事件，您可以推断出那里会有一些代码可以对其进行操作。有一天你可能会喝醉并决定＆＃34;触摸设备上的任何人都没有使用它！＆＃34; 并删除ontouchstart处理程序。而且，在一瞬间，您的代码对任何人，触摸或鼠标都不起作用。

TL; DR 使用多个on()来电没有任何问题。

我希望这会有所帮助。

Famo.us附加了click和touchstart事件

2 个答案: