JS添加多个input button,点击其中一个button会触发2个onclick事件.

我用js循环产生5个button

var label = "";
            for (i = 0; i < 5; i++) {
                label += "<input type='button' value='button' onclick=\"bug('" +i+"')\" /><br />";
            }
            document.getElementById("label").innerHTML = label;

页面生成了5个input:

<input type="button" value="button1" onclick="bug(1)">
<input type="button" value="button2" onclick="bug(2)">
<input type="button" value="button3" onclick="bug(3)">
<input type="button" value="button4" onclick="bug(4)">
<input type="button" value="button5" onclick="bug(5)">

当我点击比如button4的时候,会先触发bug(4),处理完以后会触发bug(1).
鼠标点击button4的时候,button1也有点击效果.
其他2 3 4 5button也是如此.不知道为何.

设置断点发现产生了这么一段:

(function() {with (this[2]) {with (this[1]) {with (this[0]) {return function(event) {bug('3')
};}}}})

不知道是不是这个的原因?

2 个解决方案

#1

你应该看bug方法是如何处理的

#2

Bug方法只是简单的在一个label插入InnerHTML.