javascript - 依次单击两个元素
问题描述
需要编写一个 JS 或 jQuery,当单击第一个按钮时,它会向下滚动到一个<a>
标签,然后单击该<a>
标签。非常感谢任何帮助。下面的 HTML:
<a href="" id="reserveButton">Reserve Now</a>
<div class="spacerDiv"></div>
<a id='secondClick' href="http://www.google.ca" target="_blank">Click here again</a>
解决方案
用于href="#secondClick"
自动滚动页面,而不是简单地click()
对所需元素执行 a:
const EL = sel => document.querySelector(sel);
EL("#reserveButton").addEventListener('click', () => {
// Page is already scrolled at this point since we used #hash href
// So just perform a click...
EL("#secondClick").click();
});
<a href="#secondClick" id="reserveButton">Reserve Now</a>
<div class="spacerDiv" style="height: 200vh;">some space... scroll down</div>
<a id='secondClick' href="https://www.google.ca" target="_blank">Click here again</a>
https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
如果你想使用更好的 UX(动画),你可以使用 JSElement.scrollIntoView()
const EL = sel => document.querySelector(sel);
const el_reserve = EL("#reserveButton");
const el_second = EL("#secondClick");
el_reserve.addEventListener('click', (evt) => {
evt.preventDefault(); // Prevent default browser action
el_second.scrollIntoView({behavior: "smooth"});
el_reserve.__is_clicked = true;
});
new IntersectionObserver((entries, obs) => {
if (el_reserve.__is_clicked && entries[0].isIntersecting) {
el_second.click(); // Perform a click when element is in viewport
el_reserve.__is_clicked = false; // reset
}
}).observe(el_second);
<a href="#secondClick" id="reserveButton">Reserve Now</a>
<div class="spacerDiv" style="height: 200vh;">some space... scroll down</div>
<a id='secondClick' href="https://www.google.ca" target="_blank">Click here again</a>
https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView
https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
推荐阅读
- mysql - How to delete records in another mysql table only if all the matching records have been flagged
- excel - 带有嵌套 SUMIFS 的 VLookUp
- android - Cannot import gradle library in code, although it appears in my external libraries list
- javascript - Javascript object undefined issue
- kubernetes - 避免 Prometheus 调用所有 k8s 服务实例(只有一个,应用范围的指标收集)
- python - 如何使用 python 从解析的样式表中获取任何 html 元素的样式?
- python - How to change the error message for all exceptions in Python?
- python - Downloading PDF files though a list in python
- typescript - 打字稿项目中的 Eslint 和更漂亮 - 禁用更漂亮的错误
- python-3.x - 我应该使用哪种分类模型来进行机器学习中的作者归属?