Phonegap/Cordova way to handle more than one touch event simultaneously on Android

Question

I'm trying to create a Cordova app that will be able to handle more than one touch event simultaneously.

So the user can continue to touch a button while moving a slider, or touching other buttons.

The app will only run on Android, and more precisely Android 4.1.2 or more. I'm using Cordova 3.1.0.

For now, I'm doing the following with no luck:

var app = {
    initialize: function() {
        this.bindEvents();
    },
    bindEvents: function() {
        document.addEventListener('deviceready', this.onDeviceReady, false);
    },
    onDeviceReady: function() {
        app.handleSerial();
    },
    handleSerial: function() {
        var tht = document.getElementById('manuel');
        var speed1 = document.getElementById('rythme');
        var speed2 = document.getElementById('melodie');
        var speed3 = document.getElementById('sequenceur');

        tht.addEventListener('touchstart', function(event) {
            serial.write('1');
        }, false);
        tht.addEventListener('touchend', function(event) {
            serial.write('0');
        }, false);
        speed1.addEventListener('touchstart', function(event) {
            serial.write('2');
        }, false);
        speed2.addEventListener('touchstart', function(event) {
            serial.write('3');
        }, false);
        speed3.addEventListener('touchstart', function(event) {
            serial.write('4');
        }, false);

        var errorCallback = function(message) {
            alert('Error: ' + message);
        };

        serial.requestPermission(
            function(successMessage) {
                alert(successMessage);
                serial.open(
                    {baudRate: 9600},
                    function(successMessage) {
                        alert(successMessage);
                    },
                    errorCallback
                );
            },
            errorCallback
        );
    }
};

But it's not working, while tht button is touched I cannot touch other buttons in order to handle their events.

Any idea?

Thanks!

Answer 1

Ended up doing this, where buttons is the closest common ancestor. Works nice.

var buttons = document.getElementById('buttons');
buttons.addEventListener('touchstart', function(event) {
    for (var i = 0; i < event.touches.length; i++) {
        var touch = event.touches[i];
        var elem = document.elementFromPoint(touch.pageX, touch.pageY);
        switch (elem.id) {
            case 'manuel':
                serial.write('1');
                break;
            case 'rythme':
                serial.write('2');
                break;
            case 'melodie':
                serial.write('3');
                break;
            case 'sequenceur':
                serial.write('4');
                break;
        }
    }
});
buttons.addEventListener('touchend', function(event) {
    var contains = false;
    for (var i = 0; i < event.touches.length; i++) {
        var touch = event.touches[i];
        var elem = document.elementFromPoint(touch.pageX, touch.pageY);
        if (elem.id === 'manuel') contains = true;
    }
    if (!contains) serial.write('0');
});