为什么jquery onclick确实调用了两次动作

Question

我尝试在元素上添加onclick动作。但它的行动被召唤了两次。问题出在哪儿？ 我将举一个简单的例子：

$('#categories').on('click', '.category', function () {
	console.log('why is called twice???');
});

<form name="categories" id="categories">
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>All</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>some</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>other</label>
</form>


<script
			  src="https://code.jquery.com/jquery-3.1.0.js"
			  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
			  crossorigin="anonymous"></script>

Answer 1

因为当您点击单选按钮（或复选框）的label时，click事件会在label（当然）上被触发，也会点击单选按钮。由于click气泡，您的处理程序会看到来自label和单选按钮的点击。

您可以通过记录e.target.tagName：

来查看

＆＃13;

＆＃13;

$('#categories').on('click', '.category', function (e) {
	console.log('Click on: ' + e.target.tagName);
});

＆＃13;

<form name="categories" id="categories">
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>All</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>some</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>other</label>
</form>


<script
			  src="https://code.jquery.com/jquery-3.1.0.js"
			  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
			  crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

如您所见，如果单击标签，则会看到

Click on: LABEL
Click on: INPUT

但是如果你只是点击单选按钮本身（圆圈），你只能看到

Click on: INPUT

因此，您可能只想点击单选按钮上的点击，因为即使它只是点击的标签，您也会获得这些点击：

$('#categories').on('click', '.category > input', function (e) {
  console.log('Click on: ' + e.target.tagName);
});

＆＃13;

＆＃13;

$('#categories').on('click', '.category > input', function (e) {
  console.log('Click on: ' + e.target.tagName);
});

＆＃13;

<form name="categories" id="categories">
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>All</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>some</label>
	<label class="checkbox category"><input type="radio" name="categories" checked="checked" /><i></i>other</label>
</form>


<script
			  src="https://code.jquery.com/jquery-3.1.0.js"
			  integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
			  crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;

Answer 2

就这样使用它：

$('#categories').on('click', 'input[name="categories"]', function () {
    console.log('why is called twice???');
});

您正在调用label上的点击，而标签也会触发对输入的关注。