ActionScript 3中给fl.controls.Button添加点击扩展区域的实现方案咨询

嘿，这个需求很实用！我来帮你搞定——完全可以用addChild实现，而且不需要给遮罩加额外事件监听器，下面给你详细拆解：

核心思路 #

fl.controls.Button虽然没有SimpleButton那样直接的hitArea属性，但我们可以利用Flash的事件冒泡机制来达成目标：给按钮添加一个透明的Sprite作为子元素，点击这个Sprite时，事件会自动冒泡到父级的Button，触发Button本身的点击事件，就像直接点击按钮本体一样。

具体实现代码 #

import fl.controls.Button;
import flash.display.Sprite;
import flash.events.MouseEvent;

// 创建并添加按钮
var myButton:Button = new Button();
myButton.label = "测试按钮";
myButton.x = 50;
myButton.y = 50;
addChild(myButton);

// 创建透明的扩展点击遮罩
var clickExtender:Sprite = new Sprite();
// 画一个比按钮大的透明矩形（这里上下左右各扩展20像素，你可以按需调整范围）
clickExtender.graphics.beginFill(0x000000, 0);
clickExtender.graphics.drawRect(-20, -20, myButton.width + 40, myButton.height + 40);
clickExtender.graphics.endFill();

// 把遮罩添加到按钮内部
myButton.addChild(clickExtender);

// 给按钮绑定点击事件（只需要绑定一次，遮罩的点击会自动触发这个事件）
myButton.addEventListener(MouseEvent.CLICK, onButtonClicked);

function onButtonClicked(e:MouseEvent):void {
    trace("按钮被点击了！不管点的是按钮本身还是扩展区域～");
}

关键细节说明 #

• 遮罩的填充透明度设为0，完全隐形不会影响界面视觉；
• 不需要给clickExtender添加任何事件监听器，Flash的事件冒泡机制会自动把点击事件传递给父级的Button；
• 如果需要调整扩展区域的大小，修改drawRect的参数即可，比如想让点击范围更大，就把偏移量数值调大；
• 这个方法和SimpleButton的hitArea效果完全一致，只是实现逻辑不同——SimpleButton是直接指定点击区域，而fl.controls.Button是通过子元素的事件冒泡来模拟。

验证效果 #

点击按钮周围的扩展区域（也就是那个透明遮罩的范围），你会发现按钮的点击事件一样会触发，和直接点击按钮本体没有任何区别！

内容的提问来源于stack exchange，提问作者Spinner Finner