A workaround of the touchmove event bug? - javascript

I'm trying to execute some code whenever a touchmove event is fired. However, the touchmove event is very buggy right now. In many browsers, including the Android browser and Chrome 34.
A "solution" does exist to try to "fix" this problem:
$('html').on('touchmove', function(e) {
e.preventDefault();
//...
});
By adding preventDefault it will cause the browser to update the event. However it also stopped all further touchmove events which I didn't really want.
Is there, by any chance, a workaround that fixes this bug but also not cancelling the event? Thanks.

I believe you will need a bit more to it, and I think the answer is somewhere in terms of using all the other events in coordination and managing an "active" state.
el.on('touchstart mousedown', function(e) ...
el.on('touchcancel', function(e) ...
el.on('touchmove mousemove', function(e) ...
el.on('touchend mouseup', function(e) ...
I use angular-touch for a few things and they seem to be tackling the same problems, its worth looking at some example code.
https://github.com/angular/bower-angular-touch/blob/master/angular-touch.js#L122

Related

How to tell what Javascript event just fired

Is there any way in Javascript to tell what the most recently-fired event was? Reason I'm asking is I'm working on a site that isn't behaving properly on one of those new Ultrabooks that's running Windows 8 and is a laptop with a touch screen. If you use the standard mouse functionality (with a touchpad or an actual mouse), things work fine, but if you use the touch screen, things don't.
This only happens with IE; Chrome has its own issues (which I have fixed in the code), and Firefox hasn't given us any problems.
Basically, the functionality we have includes a "hoverIntent" block, and if you use the touch screen on IE, it registers both the "over" and "out" functions, which is a problem.
However, if there was a way for me to tell whether the last thing that happened was that the user TOUCHED THE SCREEN or CLICKED WITH A MOUSE, I'd have a solution in place. But I couldn't tell if there's a way to do that.
The only thing I could find was tacking on ".data('events')" on an element, but what returns is "click" regardless of whether it was an actual mouse click or a tap on the screen.
Is there a way to do this?
The browser does not have a standard way of recording events that happened previously. If you want to know what events happened prior to the current event, then you will have to install an event handler for those events and record them yourself so you can then look back at them at some future time.
For events that propagate, you could install some event handlers on the document object and record both event and target for the last N events.
If you're just trying to figure out what event the current event is, then you can examine the type property of the event object that is passed into the event handler as in e.type.
You can add an event to your function arguments and then use event.type to check which event is triggered.
ex:
var x = function(e) {
alert(e.type);
}
So I found out that IE has a completely different set of touch events from what EVERY OTHER BROWSER IN THE UNIVERSE has. ughhh. Instead of "touchstart," you use "MSPointerDown," etc. My solution was basically to write new event handlers for MSIE's touch device events.

trigger.io - hide a html element on touch/tap event

The problem seems simple enough yet it is not working.
What I want is a div to hide on tap. I currently am using jQuery but if anyone know have to do this in a more native manner id love to do that!
I have tried using this but it did not work
$(".event_image").on('tap', function(e) {
$(this).hide()
});
anyone got any ideas?
jQuery doesn't have anything for touch/tap events, but you can easily build your own by using these:
touchstart
touchmove
touchend
touchcancel
More information available here.
or you can use a plugin such as hammer.js which supports touch events & much more!
Could you just do a click event? They're basically the same.
$(".event_image").on('click', function() {
$(this).toggle();
});

Simulating touch event on YUI 3

I want to simulate / fire a touch event (touchstart or touchend) on a link with YUI 3.
The function .simulate doesn't handle the 'touch event', but only click/dblclick etc....
When i search in the official doc, there is nothing about it on the event section.
Is there anyway to do this ?
Thanks
I'm not sure you can use touchstart or touch{move,end} on non-touch device.
Maybe you want to try to fire a 'gesturemovestart', that should be cross-device.
Y.one.('#yourLink').fire('gesturemovestart')
See http://yuilibrary.com/yui/docs/event/touch.html#move
When the link is clicked, I fire 'gesturemovestart': http://jsfiddle.net/DrMw8/
Best regards,
Ludo
No, there is no support for simulation of touch events yet. It's documented here: http://yuilibrary.com/yui/docs/event/simulate.html#no-touch-events-yet

What event is this and how can I attach something to it? Javascript

I have managed to catch the event im looking for, using an event watcher in firefox.
It seems to indicate the event is called 'input', but ive never heard of this, can anyone offer any insight as I need to attach a function to the event.
Take a look at oninput

How do you handle oncut, oncopy, and onpaste in jQuery?

The jQuery documentation says the library has built-in support for the following events: blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, and error.
I need to handle cut, copy, and paste events. How best to do that? FWIW, I only need to worry about WebKit (lucky me!).
UPDATE: I'm working on a "widget" in a Dashboard-like environment. It uses WebKit, so it only really matters (for my purposes) whether these events are supported there, which it looks like they are.
You can add and remove events of any kind by using the .on() and off() methods
Try this, for instance
jQuery(document).on('paste', function(e){ alert('pasting!') });
jQuery is actually quite indifferent to whether the event type you assign is supported by the browser, so you can assign arbitrary event types to elements (and general objects) such as:
jQuery('p').on('foobar2000', function(e){ alert(e.type); });
In case of custom event types, you must .trigger() them "manually" in your code, like this:
jQuery('p').trigger('foobar2000');
Neat eh?
Furthermore, to work with proprietary/custom DOM events in a cross-browser compatible way, you may need to use/write an "jQuery event plugin" ... example of which may be seen in jquery.event.wheel.js Brandon Aaron's Mousewheel plugin
Various clipboard events are available in Javascript, though support is spotty. QuicksMode.org has a compatibility grid and test page. The events are not exposed through jQuery, so you'll either have to extend the library or use native Javascript events.
Mozilla supports an "input" event which I'm having trouble finding useful documentation for. At the very least, I know it fires on paste.
this.addEventListener('input',
function(){//stuff here},
false
);
As jQuery 1.7 you can use bind(...) and unbind(...) methods for attaching and removing respectively handlers.
Here are examples align your questuion:
$('#someElementId').bind('paste', function(){return false;});
- this one will block any attempts to paste from clipboard into element body. You can use also cut, copy and others as event types (see links bellow)
$('#someElementId').bind('copy', function(){return alert('Hey fella! Do not forget about copyrights!');});
So, in other cases, when you want to remove those handlers, you can use unbind() method:
$('#someElementId').unbind('copy');
Here some useful links:
bind()
unbind()
full list of event types

Categories

Resources