解决按下空格键执行上一次鼠标点击事件

先来看下一段代码的执行效果。代码如下：

 

<?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>

 

评论

2 楼 yunzhongxia 2011-12-07  

梦心缘 写道

按下tab键时，按钮还是会获得焦点，按下空格键还是会执行，没有彻底解决问题！

你怎么测试的，是可以的。

1 楼 梦心缘 2011-12-07  

按下tab键时，按钮还是会获得焦点，按下空格键还是会执行，没有彻底解决问题！