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]);的返回值被指定为onclick的{{1}}，但item没有返回任何值，所以没有注册jump的功能。

点击onclick时需要调用jump，因此您需要该行：

item

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

话虽如此，我会放弃item.onclick = function() { jump(sections[index]); };事件属性，转而使用onXyz转换为基于标准的现代代码：

addEventListener()

事件在另一个事件中触发

2 个答案: