先来看下一段代码的执行效果。代码如下:
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:Label text="点击保存按钮,鼠标不要移动,按下空格键,观察下面点击事件执行次数"/> <mx:Button label="保存" click="myClick(event)" /> <mx:TextInput id="txt" /> <mx:Script> <![CDATA[ private var num:int=0;//事件执行次数 private function myClick(event:MouseEvent):void{ num=num+1; txt.text=""+num; } ]]> </mx:Script> </mx:Application>
鼠标点击一下“保存”按钮,执行一次鼠标点击事件,保持鼠标的位置不动,按下空格键,再次执行鼠标点击事件。OK,看到Flex诡异的现象了吧。
先来说下原因,鼠标点击按钮后焦点会落在此按钮上,此时按下空格键,空格键的默认事件相应有焦点的事件。因此就执行了上一次的按钮的点击事件了。Flex你有多少的默认呀?要不是测试人员发现,恐怕我一直都不会知道。
下面这看看解决方法:
1 对症下药。重置光标。
setFocus () 方法 public function setFocus():void 设置此组件的焦点。组件可能依次将焦点传递给子组件。 注意:使用此方法设置焦点时,只有 TextInput 和 TextArea 控件加亮显示。当用户按 Tab 键切换控件时,所有控件都加亮显示。
2 杜绝隐患。拒绝接收焦点。
mouseFocusEnabled 属性 mouseFocusEnabled:Boolean [] 单击时是否可接收焦点。如果值为 false,则焦点将转换到已将 mouseFocusEnable 设置为 true 的第一个父项。例如,您可以将某个 Button 控件的此属性设置为 false,这样可使用 Tab 键将焦点移动到该控件,但在单击该控件时不会使其获得焦点。 默认值为 true.
上面两个方法都是UIComponent类的方法,Flex的可视化组件都是继承自该类,因此都可以使用上面的方法。
修改后的代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Label text="点击保存按钮,鼠标不要移动,按下空格键,观察下面点击事件执行次数"/>
<mx:Button label="保存" click="myClick(event)" mouseFocusEnabled="false"/>
<mx:TextInput id="txt" />
<mx:Script>
<![CDATA[
private var num:int=0;//事件执行次数
private function myClick(event:MouseEvent):void{
num=num+1;
txt.text=""+num;
this.setFocus();
}
]]>
</mx:Script>
</mx:Application>