Question

I am working on a Titanium mobile app and I have a problem with buttonfocusing while using backgroundRadient .

I meet success using the touchstart event (changeBackgroundGradient is simple enough to avoid display here):

authButton.addEventListener('touchstart', function(e) {
    changeBackgroundGradient(authButton);
});

But the touchend event is not what I want. It fires only if the user end the touch on the element (behaves as a click event).
Touchmove is not what I want either, as it fires as soon as the user moves.

authButton.addEventListener('touchmove', function(e) {
    revertBackgroundGradient(authButton);
});

What I want is: as long as the user is touching the button, the button is on focus. Something like ‘ontap’ and ‘onrelease’.
I know there are backgroundFocusedColor and backgroundFocusedImage, but no backgroundFocusedGradient.

How can I handle button focus while using backgroundGradient property?
I want to have the default behaviour but it seems to stop as soon as I use the backgroundGradient property.

Thanks.

–edit:

Here is the full code :

        // Authenticate Button
    var authButton = Ti.UI.createButton({
        width : '50%',
        height : '60',
        top : '15',
        bottom : '15',
        title : L('LoginView_authButton'),
        font: {
            fontSize: 20,
            fontFamily: 'TrebuchetMS-Bold'
        },
        color : '#FFFFFF',
        textAlign : 'center',
        borderColor : '#3D86A9',
        borderWidth : '2',
        borderRadius : '5',
        backgroundGradient : {
            type : 'linear',
            startPoint : {
                x : '0%',
                y : '0%'
            },
            endPoint : {
                x : '0%',
                y : '100%'
            },
            colors : [{
                color : '#a2d6eb',
                offset : 0.0
            }, {
                color : '#67afcf',
                offset : 0.5
            }, {
                color : '#3591bc',
                offset : 0.5
            }, {
                color : '#1e83b1',
                offset : 1.0
            },
            ]
        }
    });

    authButton.addEventListener('touchstart', function(e) {
        changeBackgroundGradient(authButton);
    });

    authButton.addEventListener('touchend', function(e) {
        revertBackgroundGradient(authButton);
    });

    function changeBackgroundGradient(AuthButton)
{
    AuthButton.backgroundGradient = {
        type : 'linear',
        startPoint : {
            x : '0%',
            y : '0%'
        },
        endPoint : {
            x : '0%',
            y : '100%'
        },
        colors : [{
            color : '#f5bd8b',
            offset : 0.0
        }, {
            color : '#e59a57',
            offset : 0.5
        }, {
            color : '#da7a23',
            offset : 0.5
        }, {
            color : '#c35211',
            offset : 1.0
        },
        ]
    };
}

function revertBackgroundGradient(AuthButton)
{
    AuthButton.backgroundGradient = {
        type : 'linear',
        startPoint : {
            x : '0%',
            y : '0%'
        },
        endPoint : {
            x : '0%',
            y : '100%'
        },
        colors : [{
            color : '#9FD3E9',
            offset : 0.0
        }, {
            color : '#63AAC9',
            offset : 0.5
        }, {
            color : '#348BB8',
            offset : 0.5
        }, {
            color : '#2081B2',
            offset : 1.0
        },
        ]
    };
}

Answer 1

I did the trick using touchCancel

authButton.addEventListener('touchstart', function(e) {
    changeBackgroundGradient(authButton);
});

authButton.addEventListener('touchcancel', function(e) {
    revertBackgroundGradient(authButton);
});

I first misunderstood the documentation:

touchcancel
Fired when a touch event is interrupted by the device

The touch event is indeed interrupted by the device if you end the touch outside the element. So it works as intended : as long as you press the screen, the button is orange, once you release the press outside of the button, the button goes back blue.

Thanks for your hints Sismetic, it made me figure out.