时间戳

首页 > 解决方案 > addEventListener 不会触发

  • 在 for 循环中

    • loops - addEventListener 不会触发
  • 在 for 循环中

    • 问题描述

    我已经在 i-net 上搜索了 2 天，但仍然找不到解决我的问题的方法，所以我想问你。

    背景：我有一个带有列表项的无序列表，每个 li 都有一个 ::after 元素。我想在单击 ::after 元素时向 li 添加一个类。

    这是重要的代码：

    /* jslint browser: true */
/*global window */
window.onload = function() {


 //Possible Solution - 1st Try
var lit = document.getElementById("li1");

function showMe(){
    this.classList.add("in-view");
    console.log(this.className);
}
document.getElementById("li1").addEventListener("click", showMe.bind(this,lit),false);


// Possible Solution - 2nd Try
   var liitems = document.getElementsByClassName("liitems");
   
function pullTextOnClick() {
    liitems[i].classList.add("in-view");
    }
    
for (var i=0; i<liitems.length; i++) {
    liitems[i].addEventListener("click",pullTextOnClick, false);
}

};
    .timeline ul li {
    list-style-type:none;
    position:relative;
    width:6px;
    margin:0 auto;
    padding-top:50px;
    background:#fff;
}

.timeline ul li::after{
    content:'';
    position:absolute;
    left:50%;
    bottom:0;
    transform: translateX(-50%);
    width:50px;
    height:50px;
    border-radius:50%;
    background: inherit;
    cursor:pointer;
}
    <div class="container">
    <section class="timeline" id="timelineexpand">
        <ul>
            <li class="liitems" id="li1" onclick="showMe()">
                <div>
                    <time>1992</time>
                    Sth happend
                </div>
            </li>
            <li class="liitems" id="li2">
                <div>
                    <time>1997</time>
                   Sth else
                </div>
            </li>

    我如何理解我的问题以及我在 Internet 上发现的内容： addEventListener 打开带有对象引用的第二个参数 (eventHandler)。也就是说，当我使用控制台记录它时，通常是“窗口”或“未定义”。所以我必须以某种方式告诉函数（showMe 或 pullTextOnClick）“this”是什么或使用哪个 li 元素。

    如果 eventListener 在 for 循环中并不断检查是否单击了 li-Node，我会更喜欢它。如果发生这种情况，应该将 li 元素的索引转发给函数，然后添加“in-view”类。

    问题：函数 showMe/pullTextOnClick 没有触发。如果我在这些函数中添加一个 console.log，它们不会记录任何内容。这是为什么？

    所以我希望有人能解释我为什么我的代码不起作用或如何改进它。谢谢！

    我的问题摘要：

    1. 为什么“/全局窗口/做任何事情，什么？它在评论中，但如果我不添加它，它会说“window.onload”没有定义。

    2. 如何将 eventTarget (li-element) 绑定到 eventHandler-fct (showMe, pullTextOnClick)？

    3. “绑定”-fct 是如何工作的？我阅读了很多解释，但仍然不明白为什么我的代码不起作用。

    4. 我试图用“addClass”添加一个类，但它说 fct 没有定义。它只适用于 classList.add.，但为什么呢？

    标签： loopsaddeventlistener

    解决方案

    问题解决了：

    我试图点击 li 元素。但是当我尝试这样做时，选择了父容器。原因是，因为 li 元素的 z-index 为 -1。我这样做是为了将其隐藏在另一张图片后面。学过的知识。

    推荐阅读