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

哦，好的，我现在明白了，它按预期工作，这不是错误，因为您将事件侦听器添加到按钮，因此它仅适用于按钮。

您可能希望向 authButton 添加一个名为 isFocused 或类似的属性。在 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 回答