Question

我有一个HTML5上的网络应用程序......我有一个用于某些用户操作的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");

虽然一切都很好，但点击了道场对话框的标题栏，它不会出现在可见区域......

场景...

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

问题...

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

怎么做......

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模拟真实鼠标点击

1 个答案: