I can disable touch events on android's webkit browser by the code below.
$(document).bind('touchmove', function(e){epreventDefault();});
But it seem not working on the new Firefox 4 for Android. Any idea how to do that?
$(document).bind('MozTouchMove', function(e){e.preventDefault();});
I would assume this should work. The difference is that Mozilla calls their touch events different names:
MozTouchDown: "Sent when the user begins a screen touch action."
MozTouchMove: "Sent when the user moves his finger on the touch screen."
MozTouchUp: "Sent when the user lifts his finger off the screen."
P.S. It's "e.preventDefault();" ... you forgot the "." in your code.
Related
I'm using contextmenu event to capture right clicks. On touch devices that event fired via "long press".
The problem I'm experiencing is that the contextmenu event doesn't fire on touch devices until touch is released. I could listen for touchstart/mousedown events and set timeout, but it won't be accurate since each device might have its own delay for long press activation.
So, is there a way accurately detect when long press is activated on touch screen devices? (On some devices there is haptic feedback when long press was activated)
As discussed in the comment section.
On most devices contextmenu fires without releasing the touch, so in most cases it should be fine to use the contextmenu event to get the desired result.
This might be a bug in the DevTools of Chromium, since you tested with that. I recommend to simply use the contextmenu event.
In case the specific device really fires the context menu on touch release, the user expects the same behavior on your website/app, so it should be fine to go this route.
The practical problem here is that I have an Angular 4 app that has a D3.js chart that takes input via user touch drag (bound with 'touchstart'). The user drags a needle to a value, which is registered upon touch end (bound with 'touchend').
However on a mobile browser, at least on iOS Safari, when I touch and start dragging the whole window starts to move...like dragging to right starts to show the last visited page.
I will be trying out this as a fix: Prevent iOS safari from moving web-page window so drag event can happen
But I will need to register a global event handler in Angular 4 – how to achieve this, or any better suggestions for the problem?
Not sure about what your real problem is ..
If you're talking about Safari history gestures (swipe starting off-screen to the right shows the last visited page), then it seems that it's handled on OS/browser level and we don't have any callback, check comments here :
iOS 7 - is there a way to disable the swipe back and forward functionality in Safari?
Found the solution to this problem! Add this to head in index.html or define elsewhere in your JS scripts:
<script>
document.ontouchmove = function(event) {
event.preventDefault();
}
</script>
Here is my app, running locally. My touchstart and touchend events fire correctly in the desktop Chrome mobile simulator, as well as on a friend's Android, but in Safari they do nothing. I have the viewport meta tag. It seems as though Safari is not registering as a mobile browser/device and, therefore, not registering touches.
Here is the file that I am working with the touch events. (It wouldn't format correctly here.)
(Swipe right to mark for deletion, swipe right again to confirm. Swipe left to mark complete.)
my application is using the Touch API to detect touch events in JavaScript. Example:
$(".element").on("touchstart", function(event){
alert("TRUE");
});
This works on any touch device with any browser like Android or iOS, however it doesn't work in MS Edge on a Windows 10 Tablet with or without conntected keyboard. The API seems to be supported: Compatibility list. However, I've tested: 'ontouchstart' in window and this returns false on this device. Furthermore mousedown seems to get fired.
What is going on here? What can I do to fire touch events on a Windows 10 tablet?
I would like to keep the event only for touch devices. Switching to the Pointer Events API would include also Desktop devices and that is not what I want.
for touch API, you have to activate a flag on Edge : in the address bar, enter about:flags and press enter. In the section Touch, you can enable touch events with the corresponding dropdown
Did you enable custom touch handling ? You can do it with the following css snippet (on the body tag or just a container for geastures) :
-ms-touch-action: none;
Next, touch API is a webkit feature (maybe there is an error in CanIuse ?). IE and Edge have a similar feature known as Pointer API. But you can use a polyfill library like this :
https://github.com/CamHenlin/TouchPolyfill
Try using the pointerdown event. Some (much) more information. As you can see, touchstart is triggered by Edge but not in all configurations, when a keyboard is attached/paired for example, no touchstart.
I'm developing a jquery component which works primarily for ipad. So is there anyway to simulate 'touchstart and 'touchend' events in desktop rather than having the device itself to check the events.
You can author your own custom events within jQuery:
var event = $.Event( "touchstart", { pageX:200, pageY:200 } );
And you can issue them against any element in the DOM:
$("body").trigger( event );
Demo: http://jsbin.com/ezoxed/edit#javascript,html
Further reading: http://api.jquery.com/category/events/event-object/
Keep in mind that there are various other types of interfaces on the market now that don't support touchstart and touchend events. For instance, Windows 8 is already occupying tablets in the mobile market, and it uses a more abstracted event model consisting of Pointers.
Chrome Dev-tools within a Chrome Browser allows you to emulate touch events. See https://developers.google.com/chrome-developer-tools/docs/mobile-emulation.
From the docs...
Emulating Touch Events
Touch is an input method that's difficult to test on the desktop,
since most desktops don't have touch input. Having to test on mobile
can lengthen your development cycle, since every change you make needs
to be pushed out to a server and then loaded on the device.
A solution to this problem is to simulate touch events on your
development machine. For single-touches, the Chrome DevTools supports
single touch event emulation to make it easier to debug mobile
applications on the desktop.
To use from a Chrome browser (as of version 29.0.1547.65):
Select the Chrome menu at the top-right of your browser window (three stacked lines).
Select Tools > Developer tools. (Shortcut Shift+Control+I)
A tools window will appear on the bottom with the tab Console selected.
In the bottom right click on the settings cog (look like a gear).
A setting panel will appear with "General" on top.
Click "Overrides" on left to select overrides panel.
Scroll down and check "Enable touch events"
Reload your page
You mouse will now appear as a fuzzy circle. Click to "touch".
As of 2018, Chrome DevTools supports device emulation outright, without any need for override setting. Just toggle the device toolbar (Ctrl + Shift + M) to get the browser into mobile mode, then touch events can be triggered by the mouse.