标签：
废话不多，直接看代码，一个拖动实例
<div id="touch-drag"></div> <script type="text/javascript"> var dx, dy; touch.on(‘#touch-drag‘, ‘drag‘, function(ev){ dx = dx || 0; dy = dy || 0; var offx = dx + ev.x + "px"; var offy = dy + ev.y + "px"; this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)"; console.log(this); //-> <div id="touch-drag"></div> }); touch.on(‘#target‘, ‘dragend‘, function(ev){ dx += ev.x; dy += ev.y; }); </script>
拖动正常，demo 完成，自信满满的去交工，30分钟后。。。 什么，报错？ 怎么可能，我来看看 ↓
<div id="touch-drag">
<h2>小火箭</h2>
<img src="..." />
<span>∧∪∧</span>
</div>
<script type="text/javascript">
var dx, dy;
touch.on(‘#touch-drag‘, ‘drag‘, function(ev){
dx = dx || 0;
dy = dy || 0;
var offx = dx + ev.x + "px";
var offy = dy + ev.y + "px";
this.style.webkitTransform = "translate3d(" + offx + "," + offy + ",0)";
console.log(this); //-> <img src="..." />
console.log(this); //-> <h2>小火箭</h2>
console.log(this); //-> <span>∧∪∧</span>
});
touch.on(‘#target‘, ‘dragend‘, function(ev){
dx += ev.x;
dy += ev.y;
});
</script>
xxxx ， 拖得乱七八糟，this 怎么不是选择器 "#touch-drag" ，杯具。。。
尝试方法一：console.log(ev); //-> 找找看 #touch-drag，失败
尝试方法二：应急处理，递归回 #touch-drag
var _this = (function(){ var stack_max = 100; //防止堆栈溢出 var f = function(target){ var id = target.getAttribute("id"); if(!!stack_max--) return false;if( !!id && id ==="#touch-drag" ) return target; return f( target.parentNode ); }; return f(arguments[0]) || console.error("Did not find the "#touch-drag" node"); })(this);
看看官方的 API 说明
touch.on( delegateElement, types, selector, callback );功能描述：
事件代理方法。
参数描述：
| 参数 | 类型 | 描述 |
|---|---|---|
| delegateElement | element或string | 事件代理元素或选择器 |
| types | string | 手势事件的类型, 可接受多个事件以空格分开；支持原生事件的透传。目前支持的具体事件类型，详见《手势事件类型》。 |
| selector | string | 代理子元素选择器, |
| callback | function | 事件处理函数，如需了解手势库支持的新属性，详见《事件对象》 |
经过测试，即使添加了第三个参数 selector ，this 依然不是我们想要的，那只能看看源码了。
仔细想想，touchjs 绑定很像 jQuery 的事件委托，this -> e.target，找找 touchjs 源码
var E = {}; return E.on = E.bind = E.live = B, E.off = E.unbind = E.die = C, E.config = d, E.trigger = D, E
源码最后一块，原来绑定事件的方法就是一个呀，为了支持常用习惯，多写了几个同名的，再找找
bind: function(a, c, d) { a.listeners = a.listeners || {}, a.listeners[c] ? a.listeners[c].push(d) : a.listeners[c] = [d]; var e = function(a) { b.env.ios7 && b.forceReflow(), a.originEvent = a; for (var c in a.detail)"type" !== c && (a[c] = a.detail[c]); a.startRotate = function() { t = !0 }; var e = d.call(/*a.target*/this, a); "undefined" == typeof e || e || (a.stopPropagation(), a.preventDefault()) }; d.proxy = d.proxy || {}, d.proxy[c] ? d.proxy[c].push(this.proxyid++) : d.proxy[c] = [this.proxyid++], this.proxies.push(e), a.addEventListener && a.addEventListener(c, e, !1) }
终于找到了， 看代码
var e = d.call(/*a.target*/this, a);
经过测试，OK
注：以上纯属个人看法，如有不当之处，请多多指教
关于 Touchjs 手势识别事件库 this 关键字与选择器不对称情况
标签：
原文地址：http://www.cnblogs.com/webmagic/p/5083059.html
