bringing multi-touch to Firefox and the web

The ever-energetic Felipe Gomes was nice enough to intern with Mozilla this summer in between busy semesters in Brazil. During that time he’s been working on multi-touch support for Firefox on Windows 7. A nice result of that work is that he’s also found ways to bring multi-touch support to the web. He’s made a short video and written up some short technical information to go with it.

This post has also been cross-posted to Felipe’s personal blog.

Multitouch on Firefox from Felipe on Vimeo.

I’ve been anxious to demonstrate the progress on our multi-touch support for Firefox, and this video showcases some possible interactions and use cases for what web pages and webapps can do with a multi-touch device.

We’re working on exposing the multi-touch data from the system to regular web pages through DOM Events, and all of these demos are built on top of that. They are simple HTML pages that receive events for each touch point and use them to build a custom multi-touch experience.

We’re also adding CSS support to detect when you’re running on an touchscreen device. Using the pseudo-selector :-moz-system-metric(touch-enabled) you can apply specific styles for your page if it’s being viewed on a touchscreen device. That, along with physical CSS units (cm or in), makes it possible to adjust your webapp for a touchscreen experience.

Firefox 3.6 will include the CSS property, but is unlikely to include the DOM events described below.

Here is an example of what the API looks like for now. We have three new DOM events (MozTouchDown, MozTouchMove and MozTouchRelease), which are similar to mouse events, except that they have a new attribute called streamId that can uniquely identify the same finger being tracked in a series of MozTouch events. The following snippet is the code for the first demo where we move independent <div>s under the X/Y position of each touch point.

var assignedFingers = {};
var lastused = 0;

function touchMove(event) {
    var divId;
    if (lastused < = 4)

    if (assignedFingers[event.streamId]) {
        divId = assignedFingers[event.streamId];
    else {
        divId = "trackingdiv" + (++lastused);
        assignedFingers[event.streamId] = divId;

    document.getElementById(divId).style.left = event.clientX + 'px';
    document.getElementById(divId)  = event.clientY + 'px';

document.addEventListener("MozTouchMove", touchMove, false);
                          function () { lastused--; }, false);

On the wiki page you can see code snippets for the other demos. Leave any comments regarding the demos or the API on my weblog post. We really welcome feedback and hope to start some good discussion on this area. Hopefully as touch devices (mobile and notebooks) are getting more and more popular we’ll see new and creative ways to use touch and multitouch on the web.


  1. Dan

    Great stuff. I don’t currently have any multi-touch devices, but when I do I look forward to being able to use it on the web. Multi-touch really makes HCI more intuitive.

    August 21st, 2009 at 17:58

  2. […] מקור: […]

    August 22nd, 2009 at 04:40

  3. Jean

    That sounds interesting but how do you prevent intereference with existing of features based on mutlitouch ?

    I think of Iphone (even though there is no firefox there yet) the two finger drag is used to zoom in and out of web pages what would happen between that and say the image editing use case shown in the video … ?

    August 24th, 2009 at 06:18

  4. […] of his work getting multitouch support on Windows 7 using Firefox… More information on this here and at his blog […]

    August 24th, 2009 at 06:33

  5. F1LT3R

    Seriously very cool. Awesome work Felipe! Can’t wait to start using this stuff in web apps.

    August 24th, 2009 at 09:21

  6. […] friend of mine has recently linked me to this interesting multi-touch video (see below). The video depicts a multi-touch project done […]

    August 24th, 2009 at 10:08

  7. Felipe Gomes

    @Jean: That’s a good question. The two gestures are the same so there’s definitely ambiguity there, so what we’re planning is that ultimately the webpage will be able to make the decision between getting the raw events or using the regular multitouch support from the browser.
    In the current experimental implementation what we’re doing is that the webpage can set the property document.multitouchData to true and them the browser won’t zoom or scroll and will start sending the DOM events to the page. But there are better solutions being considered, for ex. switching between modes when the page start listening for a MozTouch event.

    August 24th, 2009 at 20:01

  8. […] even recently demonstrated multi-touch screen events thats enable you of controlling your browser with your […]

    September 15th, 2009 at 08:54

  9. […] a fost aparuta pe site-ul si Pc […]

    October 16th, 2009 at 12:34

  10. Gert


    I have been trying to get this working on Firefox 3.7 alpha on Windows 7 Professional and an Acer T230H monitor but without luck. I have made a very simple test page available on

    Firefox does respond to the -moz-system-metric(touch-enabled) css selector but I can’t get any reactions in my javascript, regular taps on the monitor is reconized as mouse clicks.

    The drawing example app at does not work either (found it through this blog post:

    I have looked through about:config to see if I should enable something to get Mozilla touch events to work but I cannot find anything.

    Does anybody know what it is that I am missing? I’m sure it’s simple once I know but right know I’m stuck.

    Full browser info: Mozilla/5.0 (Windows; U; Windows NT 6.1; WOW64; en-US; rv:1.9.3a5pre) Gecko/20100602 Minefield/3.7a5pre

    June 3rd, 2010 at 03:50

  11. Gert

    Oh forgot to mention that the microsoft touch pad example applications all work fine.

    June 3rd, 2010 at 04:47

    1. Anders

      Been doing research. Seems like u need a special build of Firefox. Anyone know where to find that.

      July 13th, 2010 at 07:44

      1. Gert

        Hi Anders,

        I got a special build from Felipe by commenting on his blog post at

        July 14th, 2010 at 09:50

        1. Anders

          Hi Gert

          Thanks a lot. Will play around with it. Can’t wait until it’s finally released.

          July 14th, 2010 at 13:48

  12. Henrik

    Is there a reason you’re using different syntax that Webkit has for multitouch gestures (on the iPhone)? This stuff is really cool and must-have for the future development… but as a developer, I really really wish there wouldn’t be another browser war around multitouch gestures. One day, it will be the defacto input method, so we should get these things right.

    Doc for Safari’s multitouch-syntax:

    August 16th, 2010 at 20:06

  13. Priyank

    Well great release ever…I liked it very much….

    October 29th, 2012 at 12:13

  14. Piyush

    That’s really an awesome release…. love it…

    December 7th, 2012 at 05:29

Comments are closed for this article.