如何解决Javascript:如何返回发生点击事件的元素?
我正在尝试构建一个函数来更改多个元素的类别,并在点击的特定元素上有一些变化。现在我只是想记录触发事件的元素。我可以记录被点击的元素,但是因为 projectBox div 中有子元素,它会返回那个子元素,因为它位于它上面。
我的 HTML:
<div class = 'contentBox' id = 'contentBox'>
<div id = p1 class = 'projectBox'><img = .... ></div>
<div id = p2 class = 'projectBox'><img = .... ></div>
<div id = p3 class = 'projectBox'><img = .... ></div>
<div id = p4 class = 'projectBox'><img = .... ></div>
<div id = p5 class = 'projectBox'><img = .... ></div>
</div>
我的 JavaScript:
const pOne = document.getElementById('p1');
const pTwo = document.getElementById('p2');
const pThree = document.getElementById('p3');
const pFour = document.getElementById('p4');
const pFive = document.getElementById('p5');
const pOne = document.getElementById('p1');
const pTwo = document.getElementById('p2');
const pThree = document.getElementById('p3');
const pFour = document.getElementById('p4');
const pFive = document.getElementById('p5');
pOne.addEventListener('click',gridAnimator)
pTwo.addEventListener('click',gridAnimator)
pThree.addEventListener('click',gridAnimator)
pFour.addEventListener('click',gridAnimator)
pFive.addEventListener('click',gridAnimator)
function gridAnimator(){
console.log(this.parentElement)
}
现在,显然这会将父级记录为: <div class="contentBox" id="contentBox">...</div>
,但是我希望它在单击 pOne 时返回 pOne,单击 pTwo 时返回 pTwo 等。
是否有简单的语法来完成这项工作,还是我需要解决?
谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。