Firefox 4 Beta: Latest Update is Here – Experimenting With Multi-touch

The latest Firefox 4 Beta has just been released (get it here). This beta comes with hundreds of bug fixes, improvements and multi-touch support for Windows 7 (see the release notes here). This article is about multi-touch support.

Felipe Gomes is working on bringing multi-touch support to web content. In this latest beta, we are experimenting with this new feature.

Playing with MultiTouch, HTML5 and CSS3:

This video is hosted by YouTube and uses the HTML5 video tag if you have enabled it (see here). YouTube video here.

Multi-touch Events

If you have a multi-touch capable display, touch events are sent to your web page, more or less like mouse events. Each input (created using your fingers) generates its own events:

  • 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.

Touch information

Touch events provide several useful properties.

  • event.streamId: don’t forget, it’s multi-touch, which means that you have to deal with several events from several sources. So each event comes with an id to identify the input.
  • event.mozInputSource: the type of device used (mouse, pen, or finger, if the hardware supports it). This is a property of mouse events.
  • event.clientX/Y: the coordinates.

Designing a touch UI

You might want to have a specific UI for multi-touch capable devices. You can use the :-moz-system-metric(touch-enabled) pseudo class or the -moz-touch-enabled media query to design a more finger friendly UI.

Note: For now, this feature only works with Windows 7. If you don’t have hardware that supports multi-touch, you can try Hernan’s multi-touch simulator.

More joy:

(This video is made by Felipe, see more here).

At the beginning of the video, you see how a webpage can get data about multi-touch input, correctly track points of contact and differentiate between touch input and pen input.

At the second part, you see a visual application of multi-touch input on a fluid simulator, where each point of contact adds a particle source, and the movement adds forces to the field.

Both parts use HTML5’s canvas element to render their content.

Like it?

Edit: If you want more details, take a look at Felipe’s latest blog post.

About Paul Rouget

Paul is a Firefox developer.

More articles by Paul Rouget…


  1. Sirquini

    Really awsome

    August 11th, 2010 at 20:09
  2. Ivan Enderlin

    Seriously guys, you rock :-).

    August 12th, 2010 at 00:10
  3. Ali

    Make some of the demos available online.
    I got multiple Multitouch-devices running Windows 7 and would like to try them myself.

    August 12th, 2010 at 00:36
  4. Paul Neave

    Wow, awesome stuff. Do you know if these touch events work with MacBook Pro’s multi-touch trackpads (and the new Magic Trackpad)? If you could make that work too that would be amazing, as a lot of people don’t have touch-screen but do have multi-touch trackpads.

    August 12th, 2010 at 03:35
  5. Anon

    The article quite clearly states…
    “Note: For now, this feature only works with Windows 7”

    Why don’t people read!

    August 12th, 2010 at 06:00
    1. Sam

      Paul raises an important point: is Apple defining a proprietary standard for multi touch with the Magic Pad? We know they have patented a suite of gestures on top of the event layer, so I would expect to see HTML5 follow that lead in standardization.

      August 19th, 2010 at 08:43
  6. Derek K

    Really neat stuff. I’m not sure how Windows 7 handles multitouch but does it require a specific type of touch screen (like a capacative screen)?

    @Paul, you can probably already access Apple’s trackpads via javascript. The problem is that Apple has already built a bunch of system level gesture support into them so you’d have to figure out how to override that first. That’s why the Wacom Bamboo Touch needs a driver. It’s not using the system gesture events. You could probably also hack that and get it working.

    August 12th, 2010 at 06:49
  7. Cody Russell

    I was taking a look through the Win32 code and I see that it’s already handling WM_GESTURE event and doing something with it, but I don’t see if it’s actually exposing the gesture events as an API to webapps yet. I’m also not very familiar with the Firefox source yet, but could you give me some pointers as to what the status is of gesture events?

    August 12th, 2010 at 12:02
    1. Paul

      We support gesture internally, but we don’t expose them to web content yet.

      August 13th, 2010 at 02:19
  8. Marco Pivetta

    Can’t wait to play with that :)
    Photogalleries using multitouch will be great!
    -> now downloading latest sources trunk :D

    August 12th, 2010 at 14:13
  9. Jamie Brightmore

    Try doing that video niceness with Flash! Really cool.

    August 13th, 2010 at 02:23
  10. none

    But more important things like security through a Protected Mode similar to IE8 and Chrome on Win7/Vista, no?
    This is becoming a teenager fancy browser, skipping the serious things…

    August 13th, 2010 at 09:58
  11. David

    Is the demo in the YouTube video available somewhere?

    August 16th, 2010 at 06:51
    1. Bhupesh Pranami

      Me too looking for urls for demo or anywhere source download is available?

      August 16th, 2010 at 23:30
  12. Hans Bernhard Lung

    It´s a very good tool for creative persons. :-) I can work with this feater with my photos good work. I had a smal firm in the it buissnes and now i work in a company who made medical instruments.
    Well done.

    Hans Bernhard Lung

    August 21st, 2010 at 16:10
  13. Joachim Thomas


    is it possible to test the multitouch features also with a LapTops touchpad? (in my case it’s an Elan smart-pad)… I think the problem is standard drivers track the motion, not the position…

    thanks in advance for any response ;)

    have a nice day

    August 29th, 2010 at 04:56
  14. Mithun

    Stupid question but just to know, does this work with out the hardware.. Or there is some hardware requirement as well

    September 3rd, 2010 at 12:41

    I have a question about the hardware. I see in some videos that 2×2 = 4 fingers can be used simultaneoulsy, but I only find displays I only can use 2 fingers at one time.
    Which hardware do you use or which hardware supports more than 2 fingers simultaneously?

    September 10th, 2010 at 05:25
    1. James Carrington

      N-trig multi-touch digitizers support up to 4 fingers on Windows 7. Our digitizers currently ship in the the Dell Latitude XT and XT2, HP TX2, Dell Studio 17, Lenovo T400 and are coming soon in the Fujitsu Lifebook T580 (announced but not yet shipping).

      September 23rd, 2010 at 11:13
      1. Lars Knudsen

        Please send a link to good linux drivers – if you have some inside knowledge.

        October 15th, 2010 at 08:39
  16. Chris Kilgore

    Has anyone tried using this with a multi-touch surface running Touchlib?

    October 2nd, 2010 at 09:23
  17. bernhard

    Multitouch for Android would be nice.
    On iPhone my Map works fine.

    October 17th, 2010 at 11:35
  18. bunga

    Go to the – and see how still, the text in some parts of this page is overlapped and distorted. For some strange reason, Opera & Firefox cannot come up to IE8 or IE9 and present all sites in a normal manner. This is too sad.

    November 8th, 2010 at 19:18
    1. Ashley Sheridan

      The problem isn’t that Opera and Fx can’t present sites in a normal manner, it’s the reverse, and that IE can’t display sites according to standards, so some sites tend to get built with only one browser in mind; IE as it is still the dominant browser (although not in Europe now according to some statistics)

      March 29th, 2011 at 02:46
  19. petrik

    that’s cool

    can you put the script from 1st video somewhere online?! pleassse!

    it will be very usefull for me.
    i almost love this browser!

    March 11th, 2011 at 20:06
  20. Brian

    What type of monitor is that being used in the demo? I can’t find any touch monitors on Samsung’s website.

    April 22nd, 2011 at 08:41
  21. Dilan From Sri Lanka

    Interesting Work!!!, Paul,

    Is it possible for you to put some guidance on how you implemented this 1st demo using the Firefox touch API?

    Because that would be helpful to many who really loves this stuff….

    May 2nd, 2011 at 22:51
  22. Artem

    Can I look at the source? Or an example of these events?

    September 20th, 2011 at 11:51
  23. Luca Bishop

    Really nice!!
    It’s possible to publish a full suorce code about that?

    October 18th, 2011 at 00:50
  24. Federico

    Yes, I’d like to see the code!

    December 5th, 2011 at 07:41
  25. Steven

    But more important things like security through a Protected Mode similar to IE8 and Chrome on Win7/Vista, no?

    October 4th, 2012 at 11:43

Comments are closed for this article.