如何在元素处于焦点时显示控制台消息?

您能帮我如何显示控制台消息any child element of a parent is focused吗?我正在通过tab进行关注。当我的焦点移动到父元素的任何子元素时。我想显示控制台消息。这是我的代码

const container = document.querySelector('#rc20p3');
container.addEventListener('focusin', (e) => {
console.log(e.relatedTarget);
if (container.contains(e.relatedTarget)) console.log('focus is now outside of container');
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="text"/>
<input type="text"/>
<div id="rc20p3" class="rc20panel"><div class="rh02panel rh02carousel rh02carouselinit rh02random rh02p3   rh02stopped " data-trackas="rc20:panel3" role="button"><div class="rh02w2 rh02-slide1  bgimg rh02noscrim rh02current " data-position="0"><div class="rh02w3">
<div class="rh02-pcontent">
<div class="rh02-logo-md">
<h2 class="rh02-ttl">Expanding the Possibilities of Hybrid Cloud with Oracle EVP Clay Magouyrk</h2>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-0209-panelx-pn-olive-hybrid-ondemand" href="https://www.oracle.com/events/live/expanding-possibilities-hybrid-cloud/?source=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3&amp;intcmp=:ow:o:h:feb:::RC_WWMK201212P00001:Cta_0209_OLiveOCIfeb9OnDemandPanel3">Watch on demand</a></div>
<div><a data-lbl="cta-0209-panelx-pn-olive-hyrbid-pr-news" href="https://www.oracle.com/news/announcement/oracle-expands-hybrid-cloud-portfolio-with-roving-edge-infrastructure-020921.html?intcmp=OHPpanelx">Oracle Hybrid Cloud news</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide2 darktheme bgimg rh02noscrim  " data-position="1" style=""><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl">Oracle ATP recognized in Gartner Critical Capabilities Report</h2>
<div class="rh02-leadin">
<p>Oracle ranked highest in all four Use Cases in Gartner “2020 Critical Capabilities for Cloud Database Management Systems for Operational Use Cases” report.</p>
</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-0201-panelx-pn-gart-newcopyandimage-db-crit-caps" href="https://www.oracle.com/database/gartner-dbms.html?intcmp=OHP0201">Read the Gartner report</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide3  bgimg   " data-position="2"><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl oserif">From farmer to fork</h2>
<div class="rh02-leadin">
<p>Land O’Lakes relies on Oracle Cloud to power its supply chain.</p>
</div>
<div class="rh02-leadin">&nbsp;</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-0120-panelx-pn-cust-landolakes" href="https://www.oracle.com/customers/land-o-lakes/?intcmp=OHP0120">Learn more</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide4 darktheme bgimg rh02noscrim  " data-position="3"><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl rh02-longttl">Try Cloud Free Tier</h2>
<div class="rh02-leadin">
<p>Oracle Cloud Free Tier lets anyone build, test, and deploy applications on Oracle Cloud—for free. Sign up once, get access to two free offers.</p>
</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-1030-panelX-free-tier-pn" href="https://www.oracle.com/cloud/free/?source=:ow:o:h:feb::OHPpn1030&amp;intcmp=:ow:o:h:feb::OHPpn1030">Start your trial today</a></div>
</div>
</div>
</div>
</div>
</div><div class="rh02w2 rh02-slide5 darktheme bgimg rh02noscrim  " data-position="4"><div class="rh02w3">
<div class="rh02-pcontent">
<h2 class="rh02-ttl rh02-longttl">70,000 people vaccinated in first week</h2>
<div class="rh02-leadin">
<p>Oracle builds Health Management Cloud used for COVID-19 clinical trials in U.S.</p>
<p>Ghana uses the same cloud system to distribute Yellow Fever vaccine</p>
</div>
<div class="rh02-cta">
<div class="obttns">
<div><a data-lbl="cta-1123-panelx-health-covid-pn" href="https://www.oracle.com/corporate/citizenship/health/?intcmp=OHP1123-pn" title="Learn more">Learn more</a></div>
</div>
</div>
</div>
</div>
</div><ul class="rh02nav"><li><a class="rh02cnav" href="#1" title="View Slide 1"><b>View Slide 1</b></a></li><li><a class="o-hf " href="#2" title="View Slide 2"><b>View Slide 2</b></a></li><li><a class="o-hf " href="#3" title="View Slide 3"><b>View Slide 3</b></a></li><li><a class="o-hf " href="#4" title="View Slide 4"><b>View Slide 4</b></a></li><li><a class="o-hf " href="#5" title="View Slide 5"><b>View Slide 5</b></a></li></ul></div></div>
</body>
</html>

复制的步骤.

单击第一输入字段或使用Tab聚焦第一输入字段。
再次按Tab键，它将进入下一个输入字段
现在，如果我们再次tab，它会转到父rc20p3的child element，它应该打印一个console.log。当前未显示log

yes焦点事件被触发e.relatedTarget给出了输入字段当它到达那个元素时应该给出anchor

console.log(e.r erelatedtarget . tagname)给出"INPUT"当您从输入框中选择链接时。

而console.log (e.target.tagName);给你"a";当您从输入框中选择链接时。

e。目标可能就是你所追求的。

不确定我是否理解对了，但这可能会解决你的问题。

const parent = document.querySelector('#rc20p3');
const children = Array.from(parent.children);
children.forEach(child => {
child.addEventListener("focusin", () => console.log(" Your Text "))
}

相关内容

最新更新

热门标签：