Google文档-以编程方式将鼠标单击发送到大纲窗格中的项目 [英] Google Docs - programmatically send mouse click to an item in outline pane

问题描述

在Google文档中，您可以打开大纲窗格并查看文档中的所有标题，也可以单击标题，然后视图将滚动到标题.

In Google Docs you can open outline pane and see all headers in the document, you can also click on an header and the view will scroll to header.

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

My question is how simulate mouse click programmatically with JS in Chrome extention, to scroll the view to the desired header?

我尝试了以下代码，但没有遇到任何希望:

I tryed following code but nothing hapend:

// 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);
    }
}

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

The headers is an div elements with class="navigation-item-content navigation-item-level-2", When I look in chrome dev tools > event listeners, these elements do not have any event listeners.

推荐答案

来自此答案:

尝试使用此代码；它通过快速连续的mousedown，mouseup和在元素中心触发的click事件模拟在元素上的鼠标左键单击:

Try with this code; it simulates a mouse left click on the element by a quick succession of mousedown, mouseup and click events fired in the center of the element:

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文档-以编程方式将鼠标单击发送到大纲窗格中的项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！