About TOUCHJS gesture Recognition Event Library this keyword and selector asymmetry

Not much nonsense, look directly at the code, a drag instance

<div id= "Touch-drag" ></div><script type= "Text/javascript" >varDX, Dy;touch.on (' #touch-drag ', ' drag ',function(EV) {DX= DX | | 0; Dy= Dy | | 0; varOFFX = dx + ev.x + "px"; varOffy = 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>

Drag Normal, demo completed, confident full to the completion, 30 minutes later ... What, an error? How can I take a look at ↓

<div id= "Touch-drag" > varDX, Dy;touch.on (' #touch-drag ', ' drag ',function(EV) {DX= DX | | 0; Dy= Dy | | 0; varOFFX = dx + ev.x + "px"; varOffy = dy + ev.y + "px";  This. Style.webkittransform = "Translate3d (" + OFFX + "," + Offy + ", 0)"; Console.log ( This);//- Console.log ( This);//Console.log ( This);//<span>∧∪∧</span>}); Touch.on (' #target ', ' dragend ',function(EV) {DX+=ev.x; Dy+=ev.y;});</script>

XXXX, dragged a mess, this is not the selector "#touch-drag", cup with ...

Try method One: console.log (EV); --Look for #touch-drag, failure
Try method Two: emergency treatment, recursive #touch-drag

var_this = (function(){  varStack_max = 100;//Prevent Stack Overflow  varf =function(target) {varid = target.getattribute ("id"); if(!! stack_max--)return false;if( !! ID && id = = = "#touch-drag")returnTarget; returnf (target.parentnode);  }; returnF (arguments[0]) | | Console.error ("Did not find the" #touch-drag "Node");}) ( This);

Check out the official API description

Event Proxy

touch.on( delegateElement, types, selector, callback );

Function Description:

The event proxy method.

Parameter description:

Parameters	type	Description
Delegateelement	Element or string	Event proxy element or selector
Types	String	The type of gesture event, which accepts multiple events separated by spaces, supports the transmission of native events. The specific types of events that are currently supported are described in "gesture event types".
Selector	String	Proxy child element Selector,
Callback	function	Event handlers, for more information on the new properties supported by the gesture library, see the event object

After testing, even if the third parameter is added selector, this is still not what we want, it can only look at the source code.

Think about it, TOUCHJS bindings are like JQuery's event delegates, this-and e.target, find TOUCHJS source

var E = {};     return E.ON = E.bind = E.live = B,    = E.unbind = E.die = C,    = D,    = D,    E

The last piece of source code, the original binding event method is a Ah, in order to support common habits, write a few of the same name, and then find

Bindfunction(A, C, D) {a.listeners= A.listeners | |{}, A.listeners[c]? A.listeners[c].push (d): a.listeners[c] =[d]; varE =function(a) {B.env.ios7&&B.forcereflow (), A.originevent=A;  for(varCinchA.detail) "type"!== C && (a[c] =A.detail[c]); A.startrotate=function() {T=!0        }; varE = D.call (/*A.target*/ This, a); "Undefined" = =typeofe | | 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)}

Finally found out, look at the code

var e = D.call (/*a.target*/This, a);

After testing, OK

Note: The above is purely personal opinion, if there are inappropriate, please advise

About TOUCHJS gesture Recognition Event Library this keyword and selector asymmetry