AIR: How to Detect All Link and Image Clicks in a HTMLControl

Problem:

How can an AIR application detect if a link or an image has been clicked inside an HTMLControl?

Solution:

Create an app to loop through all images and links in the web page's DOM and attach click listeners to them.

Execution:

1. After creating and setting up the AIR application project, write an init function that will build our HTMLControl. This method is invoked by the app's "creationComplete" event:

   
public function init():void{

   var container:UIComponent = new UIComponent();
   var html:HTMLControl = new HTMLControl();
   html.width = 500;
   html.height = 500;
   html.addEventListener(Event.COMPLETE, pageLoaded);
   var urlReq:URLRequest = new URLRequest("http://www.adobe.com/");
   html.load(urlReq);
   container.addChild(html);
   addChild(container);

   }

2. Once the HTMLControl is done loading "http://www.adobe.com" it will call this method:

   
private function pageLoaded(evt:Event):void{

   var numOfLinks:Number = evt.target.window.document.links.length as Number;
   for(var i:Number = 0; i < numOfLinks; i++){

   evt.target.window.document.links[i].onclick = linkClickHandler;

   }

   var numOfImages:Number = evt.target.window.document.images.length as Number;
   for(var j:Number = 0; j < numOfImages; j++){

   evt.target.window.document.images[j].onclick = imageClickHandler;

   }

   }

   This method interacts with web page's DOM (Document Object Model) to find out how many images and links there are. It then loops through the links and images arrays and adds a click listener to each link and image.

3. Last, code the two event handlers:

   
private function linkClickHandler(evt:*):void {


   mx.controls.Alert.show("link clicked");

   }

   private function imageClickHandler(evt:*):void{

   mx.controls.Alert.show("image clicked");

   }

4. Viola!

Example project files are attached to this post. Feel free to leave any suggestions and/or comments.