时间戳

首页 > 解决方案 > 如何使用祖先节点层次结构定义 addEventListener('click'

javascript - 如何使用祖先节点层次结构定义 addEventListener('click'

问题描述

介绍性说明：有人建议未明确说明以下问题。我只是想定义一个遍历三个节点的 addEventListener('click' 陷阱。我在下面展示的两个示例之一通过（大）父 id （文章标签中的'id="ArticleStyle"'）-> 向下遍历节点到它的孩子 'h1' -> 然后再向下节点到 h1 产生的孩子，'a'。也就是说，'a href' 被点击和监听。

我有两个 js 脚本正常工作，仅靠运气就能满足我的需求；不是通过强有力的计划。我都想使用该唯一 id 作为定义的起点在祖父节点/包装器中包含和评估。在第二个脚本中这样做是必不可少的，因为需要一百多个（并且不断增长的）唯一 ID；如果不是因为我使用'h1'-'a'取得了成功。幸运的是，'h1' 尚未在其他地方使用。

幸运的是，第一个脚本中的“a”链接（紧接在 / 下方，其两个 HTML 块之一包含在其下方）仅由总共四个唯一 id 作为父级，允许它在未尝试 EVALUATION for HANDLING 行注释掉的情况下发挥作用. 否则，如果我使用 'a'-'img'（因为我在第二个脚本中使用了 'hi'-'a'），那么基于类似 'a' 的其他页面导航图标的点击量会被吸引-'img' 编码。我希望使用我注释掉的尝试的代码行，正确编码并让它创建一个容器/包装器/节点，代表'div class =“flagLinkVIEW”'-'a'-'img' || 'div class="flagLinkVIEW"'-'a'-'span' 作为没有其他人进入的过滤器。

<script>
    //Toggles between Montage and Montage_VIEW based on, clicking the img icon.png or the span text below it

    document.addEventListener('click', ({ target }) => {

        //!!!!!!!!!!!!!!!! FIX 'IF' LINE COMMENTED OUT in second line below this !!!!!!!!!!!!!!!!!!!!!!!!
        //Code incorrectly formatted in line under this comment
        //if ((target.matches('.flagLinkVIEW a > img')) || (target.matches('.flagLinkVIEW a > span'))) {        

            if (target.parentElement.id === "VIEW_topIconOnOff0") {
                sessionStorage.displayStateMontage = "idMontage_VIEW";
                document.body.style.background = "white";
            }
            if (target.parentElement.id === "VIEW_topIconOnOff1") {
                sessionStorage.displayStateMontage = "idMontage";
                document.body.style.background = "rgb(225, 213, 191)";
            }
            if (target.parentElement.id === "VIEW_btmIconOnOff0") {
                sessionStorage.displayStateMontage = "idMontage_VIEW";
                document.body.style.background = "white";
            }
            if (target.parentElement.id === "VIEW_btmIconOnOff1") {
                sessionStorage.displayStateMontage = "idMontage";
                document.body.style.background = "rgb(225, 213, 191)";
            }

        //}
        //!!!!!!!!!!!Above is the closing bracket of the FIX 'IF' LINE COMMENTED OUT !!!!!!!!!!!!!!!!

    });
</script>




<div id="Icons-midNAV" class="IconOpacityControl-p5 LNKiconCOLORS">   
    <a href="#" onclick="window.open ('./Poetry%20-%20Montage%20of%20the%20Years_files/PDF%20-%20MASTER%20Montage%20of%20the%20Years.pdf', 'PDF Master',
    'resizable=yes,scrollbars=yes,top=100,left=260,height=420,width=420'); return false;">
    <img class="PDF-IconBC-Pv" src="./b-pdf_w.png" alt="PDF Master" />
    <span class="BtmCtrIconTextStyle PDF-TextBC-Pv">MASTER</span></a>

    <div class="flagLinkVIEW">
        <!-- Instead of class, which would be nice, I could if must, use a unique id of
        flagLinkVIEW_A here if necessary, and elsewhere in the second similar block, an
        id of flagLinkVIEW_B. It would be instructive though, to solve with a class example. -->

        <a id="VIEW_btmIconOnOff0" href="./Poetry%20-%20Montage%20of%20the%20Years.html"> 
        <img class="VIEW-IconBC-pV" src="./binoculars-detail-2A.png" alt="Basic-VIEW" />
        <span class="BtmCtrIconTextStyle VIEW-TextBC-pV">BasicVIEW</span></a>

        <a id="VIEW_btmIconOnOff1" href="./Poetry%20-%20Montage%20of%20the%20Years.html"> 
        <img class="VIEW-IconBC-pV" src="./binoculars-detail-2A.png" alt="Basic-VIEW" />
        <span class="BtmCtrIconTextStyle VIEW-TextBC-pV">FullVIEW</span></a>

    </div>

</div>

我为我认为的第二个脚本寻求的解决方案是相似的。在这里，我希望使用附加到文章节点的唯一 ID。我希望合并现在注释掉的错误编码行，并将其修复为包含'article id =“ArticleStyle”'-'h1'-'a'的指定节点谱系，并将其用作没有其他人进入的过滤器. 同样，js 脚本紧随其后，HTML 紧随其后。

<script>
    //Sets localStorage to transfer present sessionStorage to a new _blank tab/window being opened

    document.addEventListener('click', ({ target }) => {

    //!!!!!!!!!!!!!!! Change line below to a correctly syntaxed lineage of: 
    //if ((target.matches('#ArticleStyle h1 > a')) !!!!!!!!!!!!!!!!!!
        if (target.matches('h1 a')) {
            localStorage.previousMenu = sessionStorage.previousMenu;
            localStorage.motherMenu = sessionStorage.motherMenu;
            localStorage.rootMenu = sessionStorage.rootMenu;
        }
    });
</script>




<article id="ArticleStyle">
<h1 style="line-height:0; padding-top:1.8em">
  <a href="./Poetry%20-%20Black%20Holes%20and%20When%20Time%20Stands%20Still.html" target="_blank">
  Black Holes and When Time Stands Still</a></h1>

<!--multiple 'h1' child nodes, as above but with differing URLs -->
</article

标签： javascript

解决方案

<script>
//Sets localStorage to transfer present sessionStorage to a new _blank tab/window being opened

document.addEventListener('click', ({ target }) => {

    //!!!!!!!!!!!!Change line below to: if ((target.matches('.ArticleStyle h1 > a'))
    if (target.closest('.ArticleStyle h1 > a')) {
        localStorage.previousMenu = sessionStorage.previousMenu;
        localStorage.motherMenu = sessionStorage.motherMenu;
        localStorage.rootMenu = sessionStorage.rootMenu;
    }
});
</script>

也许您正在寻找这个https://developer.mozilla.org/en-US/docs/Web/API/Element/closest我仍然会尝试在我的布局上放置类或 id 并放置不同的处理程序而不是正文

推荐阅读