Question

我试图在调用函数（exe_datepicker）期间获取鼠标位置的像素坐标。这个函数正在一个相当大的框架内执行（在所谓的arcplan 8.7 HTML5-client中）。因此，某些限制适用：

没有机会选择任何DOM对象，因为ID /名称不可检索
我的exe_datepicker函数是通过arcplan函数调用的。
我无法访问arcplan的其他对象或功能 - Framework

我在这里尝试做什么：

创建一个临时对象（tobj）并将其附加到正文
将其移至鼠标位置
在tobj
通过API，所选日期将返回到arcplan blackbox
销毁tobj

我唯一的问题是将tobj移到鼠标位置。我怎么能做到这一点，因为有人是JS的初学者，并且限制让它在exe_datepicker函数内发生（点击该图标时调用的那个）？

谢谢！

编辑：抱歉，看起来我的第一次尝试时没有发布代码。

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 1

您只能在鼠标事件处理程序中跟踪鼠标坐标，因此我建议您创建自己的坐标，并将鼠标坐标存储在全局变量中：

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

然后在您的代码中，您可以引用mouse.x和mouse.y。坐标是相对于文档的。

用于设置tobj的位置：

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

当然，您必须确保可以移动tobj。为此，您可能需要应用一些CSS：

style="position: absolute; display: block"

Answer 2

你确定框架还没有给你一个事件对象吗？万一你应该能够很容易地获得鼠标位置 http://www.w3schools.com/jsref/event_clientx.asp

Answer 3

感谢您的帮助，我能够实现在报告应用程序中拥有jQuery日期选择器的愿望;-) 以下Javascript是自定义javascript文件的一部分，该文件正在加载所有其他内容。

＆＃13;

//New part suggested here

var mouse = { x:0, y: 0 };
document.addEventListener('click', function (e) { //Taking into account User's remark about CPU time here. Plus no more lagging between opening the function and displaying the datepicker
  mouse.x = e.clientX;
  mouse.y = e.clientY;
});

//Ausführen des Datepickers aus Arcplan heraus via STARTENJS
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");

	//alert(mouse.x + ' ' + mouse.y);
	
	var tobj = $('#dummy_'+objekt+'');
	
		tobj.css({
		"position":"absolute",
		"top":mouse.y, //mouse position y
		"left":mouse.x, //mouse position x
		"z-index":"100000",
		"border":"0px",
		"width": "1px",
		"height": "1px",
		"visiblity":"hidden",
		"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();

}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

＆＃13;

函数调用期间的鼠标位置

3 个答案: