Android Question Mouseover effect by javascript not working in webview

[Phayao]

Hello,

I could not find a solution in the forum, so i ask here:
I load a html file which contains javascript via webview.loadurl. The javascript defines a mouseover or hover effect on <a> tags:

Sub Activity_Create(FirstTime As Boolean)
    Activity.LoadLayout("Layout")
    wvSlide.initialize("wvSlide")
    pnlSlide.AddView(wvSlide,5dip,5dip,98%x, 95%y) 
    wvSlide.ZoomEnabled = False
    wvSlide.JavaScriptEnabled = True

    wvx.addWebChromeClient( wvSlide, "wvx")
    wvx.addJavascriptInterface(wvSlide,"B4A")
    wvsettings.setLightTouchEnabled(wvSlide,True)      <== no effect !

End Sub

Sub Button1_Click
    xui.MsgboxAsync("Start", "Open Book")
    Log("setting: "& wvsettings.getLightTouchEnabled(wvSlide))     <== shows always FALSE
    wvSlide.Loadurl("file:///android_asset/openbook.htm")
End Sub

The javascript: inside openbook.htm:

<html>
<head>
<title>Book Browser</title>
<meta name="viewport" content="width=device-width" />
<meta charset="UTF-8" />
<style>#body,#foot{max-width:600px}
</style>
<script>
    document.addEventListener('DOMContentLoaded', init, false);

var $id, $minX, $bookLength, $eWidth, $currentChapter;

function init()
{
    document.body.addEventListener('mouseover', doOver, false);
    document.body.addEventListener('mouseout', doOut, false);
}


function doOver(e)
{
    e = e || window.event;
    var $target = e.target || e.srcElement;
    $id = $target.id;
    if (!$id || typeof $h[$id] == 'undefined') return;
    $minX = getOffset($target, 'offsetLeft');
    $bookLength = $h[$id].length;
    $eWidth = $target.clientWidth;
    getById($target).addEventListener('mousemove', doMove, false);
    var $hPar = getById('h');
    $hPar.style.display = 'block';
    $hPar.style.top = (getOffset($target, 'offsetTop') + $target.clientHeight) + 'px';
    var $bodyWidth = document.body.clientWidth;
    if ($bodyWidth - $minX - $hPar.clientWidth < 0)
    {
        $hPar.style.left = null;
        $hPar.style.right = 0;
    }
    else
    {
        $hPar.style.left = $minX + 'px';
        $hPar.style.right = null;
    }
    doMove(e);
}

When the user hovers over a chapter number, a short summary of this chapter is shown in a popup window.

In the main html, the chapters are referred in <a> tags - I tried 2 ways: not working !

<a id="book1"  href="Gen+1" onClick = "event.preventDefault(); B4A.CallSub('gotoBook',false,id,( this.getAttribute('href')))">book1</a>
<a id="book2" href="https://www.xxxxxxxxx/?search=book2+1">book2</a>

The strange thing: when the app starts, it's working - but after one click event, the mouseover is not working any more, even after reloading the url into the webview.

I understand that wvsettings.setLightTouchEnabled(wvSlide,True) is depreciated.
To use CSS would be an alternative, but then had to rewrite the whole structure with many books each with many chapters.

I hope that is not totally confusing - maybe someone else had a similar problem.

Thanks,

Chris

 

[Phayao]

OK, I changed from Javascript mouseover to the Lib OnHover (https://www.b4x.com/android/forum/threads/library-onhover.29705)
So I can do all in B4A. The change in the JS DOM caused also weired effects on other JS parts in the program, so i suppose its really not controllable.
Thanks for considering !