Flex 按钮同时监听单击和双击事件

2.2K

有时我们在一些应用实例中可能会遇到这么一种需求：同一个组件，比如一个 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 测试通过。