代码之家  ›  专栏  ›  技术社区  ›  google dev

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

  •  3
  • google dev  · 技术社区  · 6 年前

    在Google Docs中,您可以打开outline窗格并查看文档中的所有标题,还可以单击标题,视图将滚动到header。

    我的问题是如何在Chrome扩展中用JS模拟鼠标的编程点击,以将视图滚动到所需的头部?

    我试着遵循代码,但没有任何意外:

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

    标题是 div 元素 class="navigation-item-content navigation-item-level-2" ,当我在chrome开发工具>事件侦听器中查找时,这些元素没有任何事件侦听器。

    1 回复  |  直到 6 年前
        1
  •  5
  •   Iván Nokonoko    6 年前

    this answer :

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