Question

为什么javascript函数中的jQuery函数每次点击都会逐渐触发？点击足够多次，每次点击执行100次以上。

<div class="clickity" onclick="funky()">Test</div>

var x = 0;

function funky(){
    $('.clickity').on('click', function(){
        x += 1;
        alert(x);
    });
};

JsFiddle我只是好奇它为什么会这样运作。

Answer 1

因为每次点击clickity，都会调用funky方法并在clickity上注册新的事件监听器。你要混合两种方法，或者：

var x = 0;

function funky(){
    x += 1;
alert(x);
};

<div class="clickity" onclick="funky()">Test</div>

或

var x = 0;

$('.clickity').on('click', function(){
    x += 1;
alert(x);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="clickity" >Test</div>

Answer 2

我不明白，为什么要在函数中插入监听器？每次单击都会向按钮添加新的侦听器。每次单击都会执行增量并添加新的侦听器。

Answer 3

addEventListener中的on a.k.a. jQuery有累积方面。您不是通过替换旧的，而是添加新的并保留以前的处理程序链来分配它。

Answer 4

您正在将类Javascript Onclick HTML属性与jquery结合使用。

第一轮

用户点击点击次数
一个。由于HTML属性onclick
funky将听众添加到clickety。
注意，第一次点击时，funky没有增加x。

下一轮

用户点击点击次数
一个。由于HTML属性onclick
湾由于jquery事件监听器在第一轮附加了clickety，因此x增加1
funky将听众附加到clickety

未来轮次

用户点击点击次数
一个。由于HTML属性onclick
湾由于jquery事件监听器在第一轮附加了clickety，因此x增加1
℃。由于jquery事件监听器在第二轮附加了clickety，因此x增加1
funky将听众附加到clickety

JS func里面的JQuery func执行得越来越多

4 个答案: