javascript - 单击元素(带偏移量)

Question

请帮忙解决以下问题。需要在特定元素上执行点击，但有一个偏移量。

如果我使用标准点击 - element.click()，则点击发生在元素的左上角:

但我需要点击这里:

我可以点击元素 + 偏移吗？像这样的 -

element.click().offset('top: 32, left: 32')

附注对不起我的英语。

Answer 1

• 我看到您在使用 element.click() 并假设您正在使用 jQuery。 jQuery 无法满足您的需求，它无法为事件设置偏移参数，您必须使用 native javascript。
• 点击事件对象内部有两对参数:clientX/clientY 和 pageX/pageY。两者都描述了点击发生时鼠标指针的位置。
• 位置相对于文档，而不是相对于元素。标准点击具有 clientX: 0, clientY: 0，因此它发生在文档的左上角，而不是元素的左上角。
• 如果你想点击一个元素，你必须将 clientX/clientY 设置为元素相对于文档的位置。您可以使用 .getBoundingClientRect() 找到元素位置。
• Rect .left/.top 中的位置是元素左上角的坐标。在事件中使用它们点击它的左上角。
• 现在您可以为坐标添加一个偏移量。在 Rect 中，您还可以找到元素的 width/height。如果将它们的一半添加到 x, y 中，您将获得元素中心的坐标。在事件中使用它在其中心执行点击。

---

function clickOnElem(elem, offsetX, offsetY) {
    var rect = elem.getBoundingClientRect(),
        posX = rect.left, posY = rect.top; // get elems coordinates
    // calculate position of click
    if (typeof offsetX == 'number') posX += offsetX;
    else if (offsetX == 'center') {
        posX += rect.width / 2;
        if (offsetY == null) posY += rect.height / 2;
    }
    if (typeof offsetY == 'number') posY += offsetY;
    // create event-object with calculated position
    var evt = new MouseEvent('click', {bubbles: true, clientX: posX, clientY: posY});    
    elem.dispatchEvent(evt); // trigger the event on elem
}

您按如下方式使用它；

var el = document.getElementById("myElem");
clickOnElem(el); // clicks on topLeft corner
clickOnElem(el, 'center'); // clicks on elements center
clickOnElem(el, 30, 40); // clicks inside element, 30px from left and 40px from top