Webview with Javascript onmouseover / onmouseout does not work

Question

for my master thesis I developed a gesture recognition application which uses kinect to move the mouse cursor inside a sony google tv box. It works very well for my native written application, but for being able to use it in cooperation with webviews, the webview needs to fire javascript functions on the elements onmouseover and onmouseout events.

i.e:

<input type="button" value="Test" onClick="AndroidFunction.onGenericMotionEventHover();" onMouseOver="AndroidFunction.onGenericMotionEventHover();" onMouseOut="AndroidFunction.onGenericMotionEventNoHover();" style="width:200px;height:200px;" />

When I press the button, the javascript function (resp. it's native implementation) is called. But onMouseOut and onMouseOver is not working.

Is there any fix/possible solution for that?

Thanks in advance,

Sebastian

Edit: The events work in the Google Chrome Browser for Android, so it should work somehow in a Webview, shouldn't it?

score 0 · Answer 1 · answered Jun 10 '13 at 16:42

0

Making this kind of thing work in a webview is a bit tricky - you need to make sure you hookup javascript and more. A quick test can be done using Apache Cordova aka Phonegap.

Run your javascript in there, if it doesn't work, it won't work on a TV. If it does, then you just need to modify your invocation of the WebView. Then you can enable javascript in your websettings. For more info, see http://developer.android.com/reference/android/webkit/WebView.html

answered Jun 10 '13 at 16:42

Les Vogel - Google DevRel

7,092
1
25
39

Thanks for the answer Les Vogel, but it doesn't help me to get the Javascript onMouseOver onMouseOut events working. Even if i only change the width of an element i.e. through "this.style.width='100px';" this javascript is never executed on mouse over or out. webview.getSettings().setJavaScriptEnabled(true); has been used in my code. PS: I have full control over the html source. It is not about injecting code into a foreign website. – Sebastian Jun 10 '13 at 19:33
Only saw the onClick portion. You should be able to override onGenericMotion() in the Java portion, then let you web app know. – Les Vogel - Google DevRel Jun 10 '13 at 20:52
Thanks for your answer, unfortunately the OnGenericMotion does not trigger on MouseOver for HTML-elements (it triggers only for the webview). Any other suggestions? – Sebastian Jul 08 '13 at 23:16
You'd have to call back into the HTML when you get an OnGenericMotion Event. – Les Vogel - Google DevRel Jul 09 '13 at 00:45

Neeraj Singh · Answer 2 · 2015-09-25T11:08:58.790

So easy! only need some changes with code. you need to add a dynamic event as "touchstart" and "touchend" as code given bellow:

Add a script tag on your html page.

<input type="button" value="Test" id="btnTouch" style="width:200px;height:200px;" />


<script >
        var prevent=false;
       document.getElementById('btnTouch').addEventListener("touchstart", function(e)
        {
                if(prevent){e.preventDefault();}
                AndroidFunction.doSomeThingOnTouchEvent();
        },false);
       document.getElementById('btnTouch').addEventListener("touchmove", function(e)
        {
                if(prevent){e.preventDefault();}
                AndroidFunction.doSomeThingOnTouchMove();
        },false);
        document.getElementById('btnTouch').addEventListener("touchend", function(e)
        {
                AndroidFunction.doSomeThingOnTouchUp();
        },false);
</script>

I think its help you! :)

Webview with Javascript onmouseover / onmouseout does not work

2 Answers2