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

问题

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.

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

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.

回答1:

From this answer:

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

来源：https://stackoverflow.com/questions/51848258/google-docs-programmatically-send-mouse-click-to-an-item-in-outline-pane

标签

javascript

google-chrome-extension

google-docs