rasenkantenstein rasenkantenstein - 4 months ago 10
Javascript Question

Mouse position during a function call

I am trying to get the pixel-coordinates of the mouse position during a call of a function (

exe_datepicker
). This function is being executed inside quite a big framework (inside the so called arcplan 8.7 HTML5-client). Thus certain restrictions apply:


  • There's no chance to select any DOM-objects because the IDs/names are not retrievable

  • My exe_datepicker function is called through an arcplan-function.

  • I cannot access other objects or functions of the arcplan - Framework



What I try to do here:


  1. Create a temporary object (
    tobj
    ) and append it to the body

  2. Move it to the mouse position

  3. Use the datepicker on that
    tobj

  4. Through an API the selected date will be returned to the arcplan blackbox

  5. Destroy the
    tobj



My only problem is to move the
tobj
on to the mouse position. How could I achieve this as someone being a beginner in JS and with the restriction of letting it happen inside the
exe_datepicker
function (the one being called when clicking on that icon)?

Thank you!

Edit: Sorry, looks like the code hasn't been posted in my first try.



function exe_datepicker(objekt,dateiname,sprache,miniDat,maxiDat) {
$.datepicker.setDefaults( $.datepicker.regional[ "" ] );
$.datepicker.setDefaults( $.datepicker.regional[ sprache ] );
$('<input type="text" id="dummy_'+objekt+'" name="dummy_'+objekt+'" readonly="readonly">').appendTo("body");


//I tried to play around here, but event.pagex is always undefined inside the alert.
$(this).one("click", function(event) {

alert("clicked " + event.pageX);

});

var tobj = $('#dummy_'+objekt+'');

$(this).trigger( "click" );

tobj.css({
"position":"absolute",
"top":0, //mouse position y
"left":0, //mouse position x
"z-index":"100000",
"border":"0px",
"width": $("#datepick"+objekt+"").css("width"),
"height": $("#datepick"+objekt+"").css("height"),
"font-family": "Lucida Sans Unicode"
});

tobj.datepicker({
showButtonPanel: true,
dateFormat: "yy-mm-dd",
firstDay: 1,
regional: sprache,
changeMonth: true,
showWeek: true,
minDate: miniDat,
maxDate: maxiDat,
onClose: function ()
{
tobj.remove();
}
});

tobj.change(function()
{

ARCPLAN.arcclient.acSendInputEvent(dateiname, objekt, tobj.val(), 1, 1);
tobj.remove();
}
);

tobj.mouseover(function()
{
$('#dummy_'+objekt+'').focus();
}
);
tobj.mouseout(function()
{
$('#dummy_'+objekt+'').focus();
}
);
$('#dummy_'+objekt+'').focus();

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="arcComponentContainer" tabindex="-1" style="z-index: 70;left: 938px;top: 138px;width: 16px;height: 16px"><button style="background-color:rgba(255,255,255,0.0);border-top-width:0px;border-bottom-width:0px;border-left-width:0px;border-right-width:0px;border-top-color:rgba(230, 230, 230, 0.75);border-bottom-color:rgba(130, 130, 130, 0.75);border-left-color:rgba(230, 230, 230, 0.75);border-right-color:rgba(130, 130, 130, 0.75);border-style:outset;font-family:'Arial';font-size:9pt;font-weight:normal;font-style:normal;text-decoration:none;color:#000000;text-align:center;cursor:pointer;" class="arcButton" tabindex="0"><img width="16px" height="16px" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAAGXRFWHRTb2Z0&#10;d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9i&#10;ZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2Vo&#10;aUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6&#10;bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0&#10;LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpS&#10;REYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJk&#10;Zi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIg&#10;eG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8i&#10;IHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5&#10;cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5j&#10;b20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNEOEQx&#10;RjI1NUZFMTFFNTgxODE4NTlGNjhGRTk1MDUiIHhtcE1NOkluc3RhbmNlSUQ9&#10;InhtcC5paWQ6QzNEOEQxRjE1NUZFMTFFNTgxODE4NTlGNjhGRTk1MDUiIHht&#10;cDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIFdpbmRvd3Mi&#10;PiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmRp&#10;ZDpGQUFCRkZGNkZENTVFNTExQUFGNzg4RkI3MkM3NUQzOCIgc3RSZWY6ZG9j&#10;dW1lbnRJRD0ieG1wLmRpZDpGQUFCRkZGNkZENTVFNTExQUFGNzg4RkI3MkM3&#10;NUQzOCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1w&#10;bWV0YT4gPD94cGFja2V0IGVuZD0iciI/PqxYR5gAAABqSURBVHjaYvz//z8D&#10;AwPjpHNA8n+eEQMGQJYCshkhGogEQA1MDCQCkjWwwF1JEEC8QbGTgMZATMJk&#10;UOAHzFDHyoC5ARgPE8/+BwOCDCBJspNAMU18sCJimmDgUBxKhAMHWQNWq3EB&#10;gAADAL5DXK0N5uLcAAAAAElFTkSuQmCC&#10;"></button></div>
</body>




Answer

You can only track the mouse coordinates in an mouse event handler, so I'd suggest to create your own, and store the mouse coordinates in a global variable:

var mouse = { x:0, y: 0 };
document.addEventListener('mousemove', function (e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

Then in your code you can reference mouse.x and mouse.y. The coordinates are relative to the document.

For setting the position of tobj:

tobj.style.left = mouse.x + 'px';
tobj.style.top  = mouse.y + 'px';

Of course, you must make sure that tobj can be moved. To achieve this, you may need to apply some CSS to it:

style="position: absolute; display: block"
Comments