如何模拟 DOJO 的真实鼠标点击

Question

我有一个在 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");

虽然一切正常，但在单击 dojo 对话框的标题栏时它并没有出现在可见区域...

场景...

我拖动了网页底部的对话框（真正底部再往下会向上推）。然后我点击了在对话框中附加一些数据的框，因为附加的数据进入了屏幕。

问题...

当我手动单击标题栏时，对话框会自动将其向上移动到从底部计算的可视区域。但是当我从代码中模拟点击时（如上所示），它并没有这样做...

怎么做...

Answer 1

定位不是在点击时定位，而是在结束拖动时定位。模拟点击不会触发拖动机制。

但是，您可以解决它。这是一个肮脏的把戏，但您可以调用对话框的 _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>

如何模拟 DOJO 的真实鼠标点击

How to simulate a Real Mouse click for DOJO

javascript

dojo