事件在另一个事件中触发

Question

在第一次单击每个部分时，我创建了一个 li，其中包含该部分 h2 的内容，并且它必须是该部分的锚点。 问题是item.onclick在doSomething方法中触发，而不是在我单击li时触发。

我该如何解决？

PS：我知道每个部分的第一个孩子是一个h2。

var list = document.getElementById('cuprins');

var sections = document.getElementsByTagName('section');
var l = sections.length;
var viz = new Array(l).fill(0);

for(var i = 0; i < l; i++)
    sections[i].addEventListener('click', doSomething);

function jump(h){
    var top = h.offsetTop;
    window.scrollTo(0, top);
    console.log(h);
}

function doSomething(e){
    var index;
    for(var i = 0; i < l; i++)
        if(e.currentTarget == sections[i]){
            index = i;
            break;
        }


if(viz[index] == 0){
        var text = sections[index].children[0].textContent;
        var item = document.createElement('li');
        item.innerHTML = text;
        item.onclick = jump(sections[index]);
        list.appendChild(item);
        viz[index] = 1;
    }
}

Answer 1

您正在执行函数并将结果分配给item.onlick事件而不是，使用下面的代码将函数声明分配给item.onclick事件

   if(viz[index] == 0){
            var text = sections[index].textContent;
            var item = document.createElement('li');
            item.innerHTML = text;
            item.onclick = function() {
               jump(sections[index])
            };
            list.appendChild(item);
            viz[index] = 1;
        }
    }

Answer 2

问题是jump(sections[index]); 没有被指定为item.click的回调函数。 相反，它会在调用doSomething并且viz[index] == 0任何时候执行。

然后发生的是调用jump(sections[index]);的返回值jump(sections[index]); 被分配为item的onclick ，但jump不返回任何值，所以没有用onclick注册的函数。

您需要在单击item时调用jump ，因此您需要该行：

item.onclick = function() { jump(sections[index]); };

这样外部函数就被分配为事件回调函数，并且在事件发生之前不会调用函数的内容。

话虽如此，我将远离onXyz事件属性，转向使用addEventListener()现代、基于标准的代码：

item.addEventListener("click", function() { jump(sections[index]); });