Flex 按钮同时监听单击和双击事件
有时我们在一些应用实例中可能会遇到这么一种需求:同一个组件,比如一个 button,需要同时监听单击 click 和 双击 double click 事件。通常在列表中,这种需要更为常见一些。例如有左右两个分栏列表,点击选中,可以作一些操作;双击列表项则可以将一侧列表项移动到另一侧。
我们知道,在 Flex 里面,有 click 事件和 doubleClick 事件。click 用于处理单击,doubleClick 用于处理双击。于是,我们可以写出下面的代码:
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ private function clickHandler(event:MouseEvent):void { label.text += "click\n"; } private function doubleClickHandler(event:MouseEvent):void { label.text += "double click\n"; } ]]> </fx:Script> <s:layout> <s:VerticalLayout /> </s:layout> <s:Button label="hello, world" click="clickHandler(event)" doubleClickEnabled="true" doubleClick="doubleClickHandler(event)"/> <s:Label id="label" /> </s:Application>
我们希望当点击 button 的时候,label 显示 click;双击的时候则显示 double click。然而,运行一下程序会发现,双击按钮时,label 会显示一个 click 一个 double click。这是由于 double click 属于双击,双击其实由两个单击组成。因此,Flex 在检测到双击的同时,也发现了单击。
解决方案是,我们在 click 事件中添加一个延时。在 click 事件发出时,启动延时机制,如果在一小段时间中没有检测到第二次点击,则认为这就是一个 click 事件,执行这个 click 事件的处理函数;如果在延时期检测到第二次点击,则认为是一个 double click 事件,执行 double click 事件的处理函数。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Script> <![CDATA[ private var interval : Number = 0; private function clickHandler(event:MouseEvent):void { clearInterval(interval); interval = setInterval(deferredClickHandler, 200); } private function deferredClickHandler() : void { label.text += "click\n"; clearInterval(interval); } private function doubleClickHandler(event:MouseEvent):void { clearInterval(interval); label.text += "double click\n"; } ]]> </fx:Script> <s:layout> <s:VerticalLayout /> </s:layout> <s:Button label="hello, world" click="clickHandler(event)" doubleClickEnabled="true" doubleClick="doubleClickHandler(event)"/> <s:Label id="label" /> </s:Application>
在这段代码中,click 事件使用 setInterval() 函数设置一个 200 毫秒的延时。延时的回调函数是 deferredClickHandler()。如果延时结束,则执行 deferredClickHandler() 函数中的语句,也就是单击事件的实际处理语句。最后不要忘记 clear 这个定时器。如果是双击,则会进入 doubleClickHandler() 回调函数。在这个函数中,首先要停止计时器,然后再执行所需要的操作。这样,我们就利用一个延时的定时器,实现了同时处理单击和双击事件这一需求。
值的说明的是,这一技术不仅用于 Flex,同时可以用于 js 等页面技术。
本文代码使用 Flex 4.5.1 测试通过。
转载时请标明文章原始出处:http://www.devbean.info/2011/08/flex-button-click-and-double-click/