单击元素（带偏移量）

Question

请帮助解决以下问题。 需要对特定元素执行单击，但需要使用偏移量。

如果我使用标准点击 - element.click（），则会点击元素左上角的点击：

但我需要点击这里：

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

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

P.S。 Ssory为我的英文。

Answer 1

• 我看到你使用element.click()并假设你正在使用jQuery。你想要的是jQuery不可能，它不能为事件设置偏移参数，你必须使用原生的javascript。
• click-event-object里面有两对参数：clientX / clientY和pageX / pageY。两者都描述了点击发生时鼠标指针的位置。
• 相对于文档的位置，而不是元素。标准点击有clientX: 0, clientY: 0，因此它出现在文档的左上角，而不是元素。
• 如果要点击元素，则必须将clientX / clientY设置为元素相对于文档的位置。您可以使用.getBoundingClientRect()找到元素位置。
• Rect .left / .top中的位置是元素topLeft角的坐标。在活动中使用它们点击它的topLeft角落。
• 现在您可以为坐标添加偏移量。在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

Answer 2

这是最好的方法：

＆＃13;

＆＃13;

function func(){
alert("Circle clicked!")
}

＆＃13;

div{
  border-radius: 100000px;
  width: 100px;
  height: 100px;
  background-color: red;
  cursor: pointer;
}

＆＃13;

<div onClick="func()"></div>

＆＃13;

＆＃13;

＆＃13;