javascript - 如何在 JavaScript 中展平 touchmove 监听器？

Question

Trickshot #29展示了如何在 jQuery 中定义触摸事件。我在 this fiddle 中将其修改为我的流氓写作风格.

作者所做的是在触发 touchstart 事件时定义一个 touchmove 监听器。

request.dom.ball.on('mousedown touchstart',myTouchStart);
function myTouchStart(myEvent){
   request.dom.ball.on('mousemove.myNameSpace touchmove.myNameSpace',myTouchMove);
   function myTouchMove(myEvent) {

我想做的是将 myTouchMove 放在 myTouchStart 之外，因为我的 JavaScript 编写流氓风格是尽量保持它的扁平化，并且如果可以的话，不要在函数内部有函数。

这可能看起来很奇怪，因为我已经把所有东西都包装在里面了:

(function() {
})();

首先，如果可以的话，我真的不想在函数内部的函数内部使用函数。

Answer 1

一种方法是从另一个函数(称为闭包)返回内部函数，该函数会将您最初引用的任何变量传递给原始函数。

据我所知，你的情况只有一个变量 - local - 但如果您要添加新变量，只需在函数定义和函数调用中添加一个新参数即可。

更新 fiddle :http://jsfiddle.net/ynUHb/1/

受影响的代码:

request.dom.ball.on('mousedown touchstart',myTouchStart);

function myTouchStart(myEvent){
    var local = {};
    //...
    request.dom.ball.on('mousemove.myNameSpace touchmove.myNameSpace',myTouchMove(local));
    //...
};

function myTouchMove(local) {
    return function(myEvent) {
        var myCss = {};

        myEvent = (myEvent.originalEvent.touches) ? myEvent.originalEvent.touches[0] : myEvent;
        myCss.top = local.elementPosition.y + myEvent.pageY - local.startPosition.y;
        request.dom.top.text(myCss.top);
        myCss.left = local.elementPosition.x + myEvent.pageX - local.startPosition.x;
        request.dom.left.text(myCss.left);
        request.dom.ball.css(myCss);
    };
};

参见:

• > Forming Closures