Question

每当我尝试单击下拉列表时，第一个事件是下拉列表中已加载的任何内容，第二个事件是我在下拉列表中单击的任何内容。基本上，发生了两件事，但我只想要第二次点击。

HTML

<select class="pictureList" id="pictureList">
<option class ="option0" id="option0">select a picture</option>
<option class ="option1" id="option1">picture 1</option>
<option class ="option2" id="option2">picture 2</option>
</select>

的Javascript

document.addEventListener("DOMContentLoaded", function() {
    document.getElementById("pictureList").addEventListener("onkeyup", actionListener, false);
}, false);

function actionListener(event) {
    if(event.target == document.getElementById("pictureList")) {
    loadPicture();
    }
}

function loadPicture() {
    var picture = document.getElementById("pictureList");
    if (picture == "select a picture") 
    load;
    else if (picture == "picture 1")
    load;
    else if (picture == "picture 2")
    load;
 }

所以一切都正确加载，只是每当我点击列表查看其他选项时，它就会加载列表中的任何内容。例如，列表从图片1开始，我想加载图片2.然后我点击列表查看选项，图片1再次加载，然后我点击图片2，然后加载。我不希望图片1再次加载。我也尝试过onchange，但它仍然会这样做。

Answer 1

您可以尝试＆＃34;更改＆＃34;而不是＆＃34; onkeyup＆＃34;在addEventListener中。
例如：document.getElementById（＆＃34; pictureList＆＃34;）。addEventListener（＆＃34; change＆＃34;，actionListener，false）;

参考网址：addEventListener, "change" and option selection

或者，如果您需要更多帮助，可以发给我一部分代码＆＃34; mohit.tiwari@techinfini.com"。

选项单击两次

1 个答案: