如何在touchStart上启用按钮焦点？答案

【问题标题】：How to enable button focus on touchStart?如何在touchStart上启用按钮焦点？
【发布时间】：2014-10-29 15:40:27
【问题描述】：

我创建了一个按钮，我需要一些按钮的响应，例如，在触摸按钮时，按钮焦点应该启用，例如背景颜色的更改。我该怎么做？

我的代码是， 查看：

<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>

风格：

".button":{
    width: '50%',
    top: '25dp',
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#808080',  
    backgroundGradient: {
        type: "linear",
        startPoint: { x: "0%", y:"0%"},
        endPoint:   { x: "0%", y:"100%"},
        colors: [
            { color: "#4F94CD", offset: 0.0 },
            { color: "#4F94CD", offset: 1.0 }
        ]
    }
}

控制器：

$.proceedButton.addEventListener('touchstart', function() { 
    $.proceedButton.isFocused = true;
  });  

  $.proceedButton.addEventListener('touchend', function() { 
     $.proceedButton.isFocused = false;
  });

上面的代码不起作用。只是我需要在触摸按钮时稍微改变背景颜色。

任何解决方案！

【问题讨论】：

标签： titanium titanium-mobile titanium-alloy tss

【解决方案1】：

使用此属性并传递颜色代码

backgroundSelectedColor : "RED"

focusable 对于普通视图必须为真。更多你可以参考这个http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.Button-property-backgroundSelectedColor

希望对你有帮助

【讨论】：

我在哪里可以使用这个属性？
在按钮属性上添加这个。
从控制器中移除 touch start 和 touch end 事件监听器，只添加 backgroundSelectedColor 的属性：“RED”。
@CodeForFun 很抱歉，您已经提到了正确的答案。

【解决方案2】：

合金xml会是这样的

<Button class="button" id="proceedButton" onClick="openQuestionnaire">Proceed</Button>

那么按钮属性会是这样的

".button":{
 width: '50%',
 top: '25dp',
 borderRadius: 8,
 borderWidth: 1,
 borderColor: '#808080',
 backgroundSelectedColor : "red",
 backgroundSelectedImage : "/my_image.png",
 backgroundGradient: {
    type: "linear",
    startPoint: { x: "0%", y:"0%"},
    endPoint:   { x: "0%", y:"100%"},
    colors: [
        { color: "#4F94CD", offset: 0.0 },
        { color: "#4F94CD", offset: 1.0 }
    ]
  }
}

您可以在触摸焦点上设置您选择的图像或背景颜色。您不需要在控制器中编写的控制器代码。同样对于某些对象，您也可以选择颜色。也可以设置backgroundFocusedImage，

【讨论】：

【解决方案3】：

正如@CodeForFun 提到的，您可以使用按钮的backgroundSelectedColor 属性。

以下是Titanium中按钮可以使用的所有状态。

已禁用：backgroundDisabledImage 和 backgroundDisabledColor
正常：backgroundImage 和 backgroundColor
关注：backgroundFocusedImage 和 backgroundFocusedColor
已选择：backgroundSelectedImage 和 backgroundSelectedColor

希望这会有所帮助。

编辑：使用示例：

查看：

<Button class="button" >Proceed</Button>

TSS：

".button":{
width: '50%',
top: '25dp',
backgroundSelectedColor : "#4F94CD" //usage
}

【讨论】：

在哪里可以使用 backgroundSelectedColor 属性？