Question

I have built a Air 2/Flex 4 kiosk application with Flash Builder 4. Currently I am implementing a touch screen browser to enable users to navigate company training videos.
In an attempt to improve the usability of the website on the touchscreen I have placed the HTML component in an adaption of Doug McCune’s DragScrollingCanvas (updated to use the flex 4 ‘Scroller’ component) to allow users to scroll the webpage by dragging their finger across the screen. The mouseDown event is used to start scrolling the viewport.
In addition the webpage was modified to disable text selection with the following css:

html {
    -webkit-user-select: none;
    cursor: default;
}

The problem I face is that the HTMLLoader component only fires a mouseDown if a link/input/button on the webpage is clicked, not when the background or any text is clicked.

In addition if I remove the custom css the mouseDown event will not fire when text is being selected, but will if previously highlighted text is clicked.

As an alternative I also tried adding a group container with the same dimensions as the HTMLLoader to detect the mouseDown events (so that the group container and HTMLLoader have the same Dragable parent container) and was able to capture mouseDown events and scroll the viewport as expected. However as the mouse event is handled by the group container, I am now unable to navigate the webpage.

Does anybody know why the HTMLLoader component is not raising mouseDown events for all mouse clicks?

Answer 1

I faced the same problem, a way to resolve this is to write javascript when load web page complete.

I do it like this:

<mx:HTML id="html" ... >
  <mx:complete>
    var document:Object = html.htmlLoader.window.document;
    var body:Object = document.getElementsByTagName("body");
    body[0].onmousedown = function(o:Object):void
    {
      trace("mouseDown");
      ...
    }
  </mx:complete>
</mx:HTML>