onclick事件调用自身为何只执行两次？

[miaoch]

刚刚看了一个帖子http://bbs.csdn.net/topics/392146691
试了一下下面的代码的确不会死循环：
<button>test</button>
<script type="text/javascript">
var i = 0;
document.getElementsByTagName("button")[0].onclick = click2;
function click2() {
console.log("start" + i++);
document.getElementsByTagName("button")[0].click();
console.log("end" + i++);
}
</script>
但是结果打印却是start0 start1 end2 end3
我用的是chrome浏览器 然后又用了IE9 打印却是start0 end1
有没有大神出来总结一下为什么会有这个现象？
不胜感激！

[cn00439805]

很简单，click事件执行的时候有个状态码，标识该click正在被执行 ie9是立马生成标识码，而chrome是第一次重复生成标识码。 当标识码为true的时候，调用click方法是无效的，这是浏览器内部机制。 如果你想永远循环下去，只要等标识码变成false就可以了，也就是把click触发放在标识码变为false之后执行：

<button>test</button>
<script type="text/javascript">
	var i = 0;
	document.getElementsByTagName("button")[0].onclick = click2;
	function click2() {
		console.log("start" + i++);
		setTimeout(function(){
			document.getElementsByTagName("button")[0].click();
		},0)
		console.log("end" + i++);
	}
</script>

[天际的海浪]

应该是浏览器特意防止了同一个元素的click()方法的递归调用。 ie浏览器把用户点击和代码执行click()等同看待，所以只执行一次。 而chrome浏览器把用户点击和代码执行click()不等同看待，所以执行两次。 如果用setTimeout()就可以无限调用。

		<button>test</button>
        <script type="text/javascript">
            var i = 0;
            document.getElementsByTagName("button")[0].onclick = click2;
            function click2() {
                console.log("start" + i++);
                setTimeout(click3, 200);
            }
            function click3() {
                document.getElementsByTagName("button")[0].click();
            }
        </script>

[miaoch]

引用 1 楼 cn00439805 的回复:

很简单，click事件执行的时候有个状态码，标识该click正在被执行 ie9是立马生成标识码，而chrome是第一次重复生成标识码。 当标识码为true的时候，调用click方法是无效的，这是浏览器内部机制。 如果你想永远循环下去，只要等标识码变成false就可以了，也就是把click触发放在标识码变为false之后执行：

<button>test</button>
<script type="text/javascript">
	var i = 0;
	document.getElementsByTagName("button")[0].onclick = click2;
	function click2() {
		console.log("start" + i++);
		setTimeout(function(){
			document.getElementsByTagName("button")[0].click();
		},0)
		console.log("end" + i++);
	}
</script>

我对这种机制是理解了，但是对于这句话“但是chrome是第一次重复生成标识码“不是很理解， 另外标识符变为false是指在click事件执行结束后做的事情吗？

[miaoch]

引用 2 楼 jslang 的回复:

应该是浏览器特意防止了同一个元素的click()方法的递归调用。 ie浏览器把用户点击和代码执行click()等同看待，所以只执行一次。 而chrome浏览器把用户点击和代码执行click()不等同看待，所以执行两次。 如果用setTimeout()就可以无限调用。

		<button>test</button>
        <script type="text/javascript">
            var i = 0;
            document.getElementsByTagName("button")[0].onclick = click2;
            function click2() {
                console.log("start" + i++);
                setTimeout(click3, 200);
            }
            function click3() {
                document.getElementsByTagName("button")[0].click();
            }
        </script>

谢谢回答。我按照你的意思特地将鼠标点击直接换成click()事件，果然在chrome中也只执行了一次。

[okkk]

事件处理机制在底层都有避免死循环的逻辑。有些事件比如"mousemove时间"，如果处理程序的性能过低，都可能导致绑定的事件处理函数不再被调用。

[zuoyangguang]

没这个写法，做脑洞题？