Thursday, December 17, 2015

ActiveX Mouse Events with mouse position, VLC web plugin - Part 2

So, i had a task that was one of those hard to solve.

I need to use the mouse events over the activeX. I tried all the solutions in all the foruns, none this work.

Some solutions, sugest the use of one iframe over the activeX, then, make it transparent. This solution didn't  work for me, i beleave this solution work with some activeX, but not all of them, for example VLC web plugin.

In this activeX, the mouse move, click, mouseup,mousedown events, did not work. Because, none of them are exposed in the activeX. But, i tried something different, the drag, dragend, does work over this component. So, i changed the requiriments in order to implement my feature using drag events, scroll events also seem to work :).

Try the following:
window.document.body.addEventListener("drag", function(event){debugger;}, true);  //will work if dragging over the activeX and you can get the mouse position
window.document.body.addEventListener("click", function(event){debugger;}, true); //will not work over the activeX

This is a matter that is all over the web, if you have some question, just add a comment.

I'm hoping that with this, i can give a little bit back.

JS ActiveX Events Explained, in all IE Versions. Part 1

Just a note for the younger developers: Yes, activeX are just for IE.

It seems that there is a lot of questions about activeX and the behaviour of mouse events on this type of components.

To start, let me just explain that activeX (in general), behave like a completely separate object and doesn't work in the same processa as IE.
The only mouse events exposed in the activeX are the ones that the developer of the activeX component chose to implement. So, when you try to hook the mouse events in your page, (using js of course), you should use attachEvent method, but if your IE version does not support this method, then you should turn to this deprecated html tag:
<script event="EventName" for="objectId" language="language">

For more details; https://msdn.microsoft.com/en-us/library/aa242436%28v=vs.60%29.aspx
You can choose to code a javascript method to implement this feature. For the activeX ctrl, and event Connect:
            var scriptEventConnect = $("script[for='" + ctrl.id + "']");
            if (scriptEventConnect != null && scriptEventConnect.length == 1){
                scriptEventConnect.empty(); }
            var s = document.createElement("script");
            s.language = "JScript";
            var a = document.createAttribute("for");
            a.value = ctrl.id;
            s.setAttributeNode(a);
            s.event = "Connect(lSourceId, sType)";
            s.innerHTML = ".............RIGHT HERE THE EVENT HANDLER CODE........ ";          
            (head || document.body).appendChild(s);
            

So, by now you should knowthe right way to use events that are exposed in the activeX. I love JQuery, but it seems that is not the rigth way of handling activeX events. It's not a JQuery related problem, activeX are not multibrowser, so....

You must be sure about the events that are exposed by the activeX and their arguments.