我有一个基于 HTML5 的 Web 应用程序...其中我有一个用于某些用户操作的 dojo 对话框...现在我想单击该对话框的标题栏...的标题栏对话框可通过 ele = document.getElementById("searchFrame_title");
...
我正在通过这个点击对话框的标题栏...
ele = document.getElementById("searchFrame_title");
ele.style.cursor = 'move';
var evt = new MouseEvent("click", {
view : window,
bubbles : true,
cancelable : true,
}), ele = document.getElementById("searchFrame_title");
ele.dispatchEvent(evt);
alert("clicked");
虽然一切都很好,但是单击道场对话框的标题栏时,它没有出现在可见区域中......
场景...
我将对话框拖到了网页底部(实际上底部再往上推就会向上)。然后我单击了在对话框上附加一些数据的框,因此附加的数据进入屏幕内部。
问题...
当我手动单击标题栏时,对话框会自动将其向上移动到从底部计算的可视区域。但是当我模拟代码中的点击(如上所示)时,它并没有这样做......
如何做...
最佳答案
定位不是在点击时完成的,而是在结束拖动时完成的。模拟点击不会触发拖动机制。
但是,您可以解决这个问题。这是一个肮脏的伎俩,但您可以调用对话框的 _endDrag()
方法(而不是模拟点击)
请参阅:
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
var dialog = new Dialog({
content: document.getElementById('dialogContent')
});
dialog.show();
document.getElementById('repositionMe').onclick = function() {
dialog._endDrag();
}
document.getElementById('addTo').onclick = function() {
document.getElementById('content').innerHTML += '<br>' + document.getElementById('content').innerHTML;
}
});
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/resources/dojo.css">
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/tundra/tundra.css">
<body class = "tundra">
<div id="dialogContent">
<button id="addTo">add content</button>
<button id="repositionMe">reposition me</button>
<div id="content">this is the content of the dialog</div>
</div>
</body>
关于javascript - 如何为 DOJO 模拟真实鼠标点击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31966425/