This is the function I use to bind 'tap' event on mobile devices. Basically a normal function.
bindTapEvent: function(container, selector, run, bindClickAlso){
var startX, startY, currentX, currentY = 0;
var moved = false;
var self;
if(touchDevice){
container.on({
click: function(e){
e.preventDefault();
},
touchstart: function(e){
e.preventDefault();
self = $(this);
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
},
touchmove: function(e){
currentX = e.originalEvent.touches[0].pageX;
currentY = e.originalEvent.touches[0].pageY;
if(Math.abs(startX - currentX) > 10 || Math.abs(startY - currentY) > 10){
moved = true;
}
},
touchend: function(e){
e.preventDefault();
run();
}
},
selector
)
} else {
if(bindClickAlso != false){
container.on('click', selector, function(){
run();
});
}
}
}
I make use of it like this:
tt.bindTapEvent(container, '.showColumns', function(){
container.find('.column').addClass('visible');
$(this).doSomething();
});
The only problem is that I cannot (obviously) user $(this) inside somtething like this. I've read about jQuery $.proxy that changes the context, but I cannot get to understand it so I can use it. Is it possible (in my case) to change the context of the anonymous function used in tt.bindTapEvent to that when I use $(this) it is 'stored' and 'used' only in the bindTapEvent function?
This is the function I use to bind 'tap' event on mobile devices. Basically a normal function.
bindTapEvent: function(container, selector, run, bindClickAlso){
var startX, startY, currentX, currentY = 0;
var moved = false;
var self;
if(touchDevice){
container.on({
click: function(e){
e.preventDefault();
},
touchstart: function(e){
e.preventDefault();
self = $(this);
startX = e.originalEvent.touches[0].pageX;
startY = e.originalEvent.touches[0].pageY;
},
touchmove: function(e){
currentX = e.originalEvent.touches[0].pageX;
currentY = e.originalEvent.touches[0].pageY;
if(Math.abs(startX - currentX) > 10 || Math.abs(startY - currentY) > 10){
moved = true;
}
},
touchend: function(e){
e.preventDefault();
run();
}
},
selector
)
} else {
if(bindClickAlso != false){
container.on('click', selector, function(){
run();
});
}
}
}
I make use of it like this:
tt.bindTapEvent(container, '.showColumns', function(){
container.find('.column').addClass('visible');
$(this).doSomething();
});
The only problem is that I cannot (obviously) user $(this) inside somtething like this. I've read about jQuery $.proxy that changes the context, but I cannot get to understand it so I can use it. Is it possible (in my case) to change the context of the anonymous function used in tt.bindTapEvent to that when I use $(this) it is 'stored' and 'used' only in the bindTapEvent function?
Share Improve this question edited Jun 9, 2015 at 20:31 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jun 6, 2012 at 20:53 z-xz-x 4511 gold badge8 silver badges15 bronze badges3 Answers
Reset to default 3Take a look at .call() and .apply() which let you pass the desired context as the first parameter.
http://odetocode./blogs/scott/archive/2007/07/05/function-apply-and-function-call-in-javascript.aspx
so in your example instead of run()
you could use run.call(this);
so you're passing this as the context for the callback function.
There's a bind function defined by the ES5 standard, and supported by all modern browsers (and shimmable for IE8 and below)
You call bind right on the function of your choice, and a new function will be returned.
The first parameter passed to bind
is the object you'd like to be set to this
inside of the resulting function, and subsequent arguments will be curried. So for your situation, just adding .bind(this)
to the anonymous function should work.
tt.bindTapEvent(container, '.showColumns', function(){
container.find('.column').addClass('visible');
$(this).doSomething(); //should work now
}.bind(this));
More info on MDN
If you know about the this
issue, I'd expected you to know about the .call and .apply methods, too :-)
You would need to call the run
-function in context of the container, respectively of this
in the listener functions:
e.preventDefault();
run.call(this, e);
BTW: You seem to declare and initialisize the var self
, but use it nowhere?