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 测试通过。

One Response

  1. 天使 2012年1月7日

Leave a Reply