Google 文档 - 以编程方式将鼠标单击发送到大纲窗格中的项目

Question

在 Google 文档中，您可以打开大纲窗格并查看文档中的所有 header，您也可以单击 header，视图将滚动到 [=25] =].

我的问题是如何在 Chrome 扩展中使用 JS 以编程方式模拟鼠标单击，以将视图滚动到所需的 header?

我尝试了以下代码但没有任何反应：

// usage: eventFire(document.getElementById('mytest1'), 'click');
function eventFire(el, etype) {
    if (el.fireEvent) {
        el.fireEvent('on' + etype);
    } else {
        var evObj = document.createEvent('Events');
        evObj.initEvent(etype, true, false);
        el.dispatchEvent(evObj);
    }
}

headers 是一个带有 class="navigation-item-content navigation-item-level-2" 的 div 元素，当我查看 chrome 开发工具 > 事件监听器时，这些元素没有任何事件监听器.

Answer 1

来自：

试试这个代码；它通过在元素中心触发的快速连续的 mousedown、mouseup 和 click 事件模拟鼠标左键单击元素：

var simulateMouseEvent = function(element, eventName, coordX, coordY) {
  element.dispatchEvent(new MouseEvent(eventName, {
    view: window,
    bubbles: true,
    cancelable: true,
    clientX: coordX,
    clientY: coordY,
    button: 0
  }));
};

var elementToClick = document.querySelector('#mytest1');

var box = elementToClick.getBoundingClientRect(),
    coordX = box.left + (box.right - box.left) / 2,
    coordY = box.top + (box.bottom - box.top) / 2;

simulateMouseEvent (elementToClick, "mousedown", coordX, coordY);
simulateMouseEvent (elementToClick, "mouseup", coordX, coordY);
simulateMouseEvent (elementToClick, "click", coordX, coordY);

Google 文档 - 以编程方式将鼠标单击发送到大纲窗格中的项目

Google Docs - programmatically send mouse click to an item in outline pane

javascript

google-docs

google-chrome-extension