NewsForumsCodeLogsGallerySpecsSearch

Mouse position bug if scrolled (HTML5)

Monkey Forums/Monkey Bug Reports/Mouse position bug if scrolled (HTML5)

Blitzbat(Posted 2012) [#1]
mojo does not take care of scrolled webpages so the mouse positions are wrong if scrolled.

Here is the fix:

In mojo.html5.js on line 124 and 125 add:
var x=e.clientX+document.body.scrollLeft+window.pageXOffset;
var y=e.clientY+document.body.scrollTop+window.pageYOffset;


In chrome it just works fine without the additions...

[edit]
The correct code must be:
if(navigator.userAgent.indexOf('AppleWebKit') == -1) {
  x += window.pageXOffset;
  y += window.pageYOffset;
}

[/edit]


marksibly(Posted 2012) [#2]
Hi,

Can you post some code that shows the bug so I can confirm this fixes it?


Fred(Posted 2012) [#3]
Hi,
This bug exists since a long time ago. Chrome works well but several others browser have this wrong behavior. Try with IE and scroll the page with the above code.
I made my own mouse handler to fix it in my game 10.000 Chests

mousetest.monkey
[monkeycode]

Import mojo

Extern
Global MyHTML5MouseX:Int = "MyHTML5MouseX"
Global MyHTML5MouseY:Int = "MyHTML5MouseY"
Function InitMouseHandler:Void() = "InitMouseHandler"
Public

Class MyApp Extends App

Field Mx:Int
Field My:Int

Method OnCreate()
SetUpdateRate( 60 )
InitMouseHandler()
End Method

Method OnUpdate()
Mx = MouseX()
My = MouseY()
End Method

Method OnRender()
Cls
SetColor 255, 255, 255
DrawText "Mojo Mouse: " + Mx + ", " + My, Mx, My
If MyHTML5MouseY <> My
DrawText "Real Mouse: " + MyHTML5MouseX + ", " + MyHTML5MouseY, MyHTML5MouseX, MyHTML5MouseY
Endif
End Method

End Class


Function Main()
New MyApp()
End Function
[/monkeycode]
MonkeyGame.html
<!DOCTYPE html>

<html>
<head>
<style type="text/css">
body{
	height: 100%;
	// I need a long page that can scroll // overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #fff;
	padding:0px;
	margin:0px;
}
canvas:focus{
	outline:none;
}

</style>
</head>

<body>

<script type="text/javascript">
	var MyHTML5MouseX = 0 ; 
	var MyHTML5MouseY = 0 ; 
</script>

<div>
Some headers and text
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
</div>

<canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=640 height=480 tabindex=1></canvas><br>

<textarea id="GameConsole" style="width:640px;height:240px;border:0;padding:0;margin:0" readonly></textarea><br>

<script language="javascript" src="main.js">Javascript not supported!</script>

<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
A long page, under the Canvas.

<script type="text/javascript">
function getMousePos(canvas, evt)
{
    // get canvas position
    var obj = canvas;
    var top = 0;
    var left = 0;
    while (obj && obj.tagName != 'BODY') {
        top += obj.offsetTop;
        left += obj.offsetLeft;
        obj = obj.offsetParent;
    }
    // return relative mouse position
    MyHTML5MouseX = evt.clientX - left + window.pageXOffset;
    MyHTML5MouseY = evt.clientY - top + window.pageYOffset;
}
function InitMouseHandler()
{
    var canvas = document.getElementById('GameCanvas');
    var context = canvas.getContext('2d');

	MyHTML5MouseX = 0 ; 
	MyHTML5MouseY = 0 ; 
 
    canvas.addEventListener('mousemove', 
		function(evt)
		{
	        getMousePos(canvas, evt);
		}, false);
}
</script>
</body>
</html>


!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Oh ! cleaning the html page to post it here, I discovered something:

removing: <!DOCTYPE html> from the html page made it works well with IE ! mojo mouse is then accurate.

I have a much more complex header in my html game page (I need it), I guess this is the same for Blitzbat.


Blitzbat(Posted 2012) [#4]
Hi,
sorry i was busy for a while.
It's the problem as you mentioned Fred.

I will post a short example tomorrow ;-)