如何使用addEventListener获取用户点击坐标,然后使用elementFromPoint().click()重



如何获取用户点击的坐标,然后在点击后或一秒钟内重复点击?

当我使用下面的代码时,第二行的console.log会打印多次,但第二次单击的预期效果不起作用。然而,当我像在document.elementFromPoint(11,54(.click((中那样将数字放入elementFromPoint时,它是有效的;

myPost.addEventListener("click", e => {
console.log(e.clientX, e.clientY);
var xclick = e.clientX;
var yclick = e.clientY;

document.elementFromPoint(11, 54).click(); //This works
document.elementFromPoint(e.clientX, e.clientY).click(); //These don't work
document.elementFromPoint(xclick, yclick).click(); //These don't work
//These don't work
setTimeout(function() {
// document.elementFromPoint(e.clientX, e.clientY).click();
document.elementFromPoint(xclick, yclick).click();
}, 1000);
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>

<div id="myPost">Click me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click me</div>

</body>
</html>

编辑:第一次点击后,记录的鼠标坐标似乎变为"0 0"。为什么?

据我所知,您需要保留coords:

const myPost = document.querySelector('p');
let t;
myPost.addEventListener("click", e => {
console.log(e.clientX, e.clientY);
const newClick = document.createEvent('MouseEvents');
newClick.initMouseEvent('click', !0, !0, window, 1, e.screenX, e.screenY, e.clientX, e.clientY, !1, !1, !1, !1, 0, null);

clearTimeout(t);
t = setTimeout(function() {
document.elementFromPoint(e.clientX, e.clientY).dispatchEvent(newClick);
}, 1000);
});
<p>click me</p>

var xclick
var yclick
myPost.addEventListener("click", e => {
if (xclick === undefined) {
xclick = e.clientX;
yclick = e.clientY;
}
console.log(xclick, yclick);
//  document.elementFromPoint(11, 54).click(); //This works
document.elementFromPoint(e.clientX, e.clientY).click(); //These don't work
document.elementFromPoint(xclick, yclick).click(); //These don't work
//These don't work
setTimeout(function() {
// document.elementFromPoint(e.clientX, e.clientY).click();
document.elementFromPoint(xclick, yclick).click();
}, 1000);
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>

<div id="myPost">Click me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click meClick me Click me Click me</div>

</body>
</html>

据我所知,每次点击事件都会重新设置变量。将它们保留在函数之外,并仅在它们不是undefined时更新它们,这将获得您想要的结果

相关内容

  • 没有找到相关文章

最新更新