Question

功能＆＃34;显示（）＆＃34;在页面加载而不是单击时触发。我不确定为什么。当我将功能更改为＆＃34; alert＆＃34;它更明显地显示了这个问题。我想尝试更改参数变量，但它没有用。我使用了x和内容。如何让它停止加载？它也只加载前两个div。我在一个单独的javascript页面上使用了相同的格式，它工作正常。

我不知道
https://jsfiddle.net/ethacker/92r0apd9/ JS：

var firstTrimesterButton = document.getElementById('firstTri');
var secondTrimesterButton = document.getElementById('secTri');
var thirdTrimesterButton = document.getElementById('thirdTri');
var firstThreeMonthsButton = document.getElementById('firstThreeMonths');
var secondThreeMonthsButton = document.getElementById('secThreeMonths');
var thirdThreeMonthsButton = document.getElementById('thirdThreeMonths');
var fourthThreeMonthsButton = document.getElementById('fourthThreeMonths');
var toddlersButton = document.getElementById('toddlers');

var fTContent = document.getElementById('fTContent');
var sTContent = document.getElementById('sTContent');
var tTContent = document.getElementById('sTContent');
var firstTMContent = document.getElementById('sTContent');
var sTMContent = document.getElementById('sTContent');
var tTMContent = document.getElementById('sTContent');
var fourthTMContent = document.getElementById('sTContent');
var toddlersContent = document.getElementById('sTContent');

//event listeners
firstTrimesterButton.addEventListener("click", display(fTContent));
secondTrimesterButton.addEventListener("click",display(sTContent));
thirdTrimesterButton.addEventListener("click", display(tTContent));
firstThreeMonthsButton.addEventListener("click", display(firstTMContent) );
secondThreeMonthsButton.addEventListener("click", display(sTMContent));
thirdThreeMonthsButton.addEventListener("click", display(tTMContent));
fourthThreeMonthsButton.addEventListener("click",display(fourthTMContent));
toddlersButton.addEventListener("click",display(toddlersContent));

//function
function display(content) {
    content.style.display= 'inline';
}

Answer 1

您应该在addEventListener中引用回调函数。如果设置display(fTContent) - 您只需运行此功能。正确的触发是

firstTrimesterButton.addEventListener("click", function() {
    display(fTContent);
});

Answer 2

addEventListener的第二个参数需要是一个函数。

由于您正在调用display()并且未将其作为引用传递，因此您可以使该命名函数返回仅在事件发生时调用的函数

您可以更改：

function display(content) {
    content.style.display= 'inline';
}

要

function display(content) {    
    return function(){
       content.style.display= 'inline';
    }       
}

的 DEMO

Javascript函数在页面加载时触发，而不是单击

2 个答案: