钛按钮.背景渐变焦点答案

【问题标题】：Titanium button.backgroundGradient focus钛按钮.背景渐变焦点
【发布时间】：2012-08-01 14:47:52
【问题描述】：

我正在开发 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
        },
        ]
    };
}

【问题讨论】：

标签： android iphone titanium appcelerator

【解决方案1】：

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

您可能希望向 authButton 添加一个名为 isFocused 或类似的属性。在 touchstart 事件中，添加：

authButton.isFocused:true;

然后在包含带有revert功能的authButton的视图/窗口上添加touchend事件。

你明白为什么吗？

【讨论】：

没错。实际上是默认行为，但它似乎在我放置 backgroundGradient 后立即停止。
好的...你可以在调用函数后添加一个警报吗？顺便说一句，你写了 changeBackgroundGradient() 吗？
是的，我写了一切。也许有一个误解：我可以看到变化（原来的蓝色到橙色）和恢复（橙色到原来的蓝色），但是只要用户将手指放在按钮上，我希望保持不变。非常像按钮的默认行为和 :hover css 类。
那么它的作用是，进行更改，然后在不结束触摸的情况下恢复？
只有当我结束触摸按钮时它才会恢复（这是一次点击并激活点击事件）。如果我在其他任何地方结束触摸，它不会恢复。无论我在哪里结束触摸，我都希望它结束。

【解决方案2】：

我使用 touchCancel 做到了这一点

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

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

我首先误解了文档：

触摸取消 当触摸事件被设备中断时触发

如果您在元素外部结束触摸，则触摸事件确实会被设备中断。所以它按预期工作：只要你按下屏幕，按钮就是橙色的，一旦你在按钮外松开，按钮就会变回蓝色。

感谢您的提示 Sismetic，它让我弄清楚了。

【讨论】：