2

私は Titanium モバイル アプリに取り組んでおり、 backgroundRadient の使用中にボタン フォーカスに問題があります。

touchstart イベントを使用して成功を収めています (changeBackgroundGradient は、ここに表示されないようにするのに十分単純です)。

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

しかし、 touchend イベントは私が望むものではありません。ユーザーが要素へのタッチを終了した場合にのみ発生します (クリック イベントとして動作します)。Touchmove は、ユーザーが移動するとすぐに起動するため、私が望んでいるものでもありません。

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

私が欲しいのは、ユーザーがボタンに触れている限り、ボタンにフォーカスがあるということです。「ontap」や「onrelease」のようなもの。backgroundFocusedColor と backgroundFocusedImage があることは知っていますが、backgroundFocusedGradient はありません。

backgroundGradient プロパティを使用しているときにボタンのフォーカスを処理するにはどうすればよいですか? デフォルトの動作にしたいのですが、backgroundGradient プロパティを使用するとすぐに停止するようです。

ありがとう。

- 編集：

完全なコードは次のとおりです。

        // 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
        },
        ]
    };
}
4

2 に答える 2

1

ああ、わかりました。意図したとおりに機能します。ボタンにイベントリスナーを追加しているため、バグではありません。ボタンにのみ適用されます。

isFocused などと呼ばれるプロパティを authButton に追加したい場合があります。touchstart イベントで、以下を追加します。

authButton.isFocused:true;

次に、元に戻す機能を使用して、authButton を含むビュー/ウィンドウに touchend イベントを追加します。

理由がわかりますか？

于 2012-08-01T15:25:17.420 に答える
1

touchCancelを使用してトリックを行いました

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

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

私は最初にドキュメントを誤解しました：

touchcancel タッチ イベントがデバイスによって中断されたときに発生します

要素の外でタッチを終了すると、タッチ イベントは実際にデバイスによって中断されます。したがって、意図したとおりに機能します。画面を押している限り、ボタンはオレンジ色になり、ボタンの外側でプレスを離すと、ボタンは青色に戻ります。

あなたのヒントSismeticをありがとう、それは私に理解させました.

于 2012-08-02T08:00:27.460 に答える