Question

对不起我的英语，我不是以英语为母语的人。

我的代码有问题。我的页面上有这样的东西：

$('#hook label').on('click', function() {
    console.log('ok');
    icon = $(this).next('input').val();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hook">
    <label><input> <img src="http://placehold.it/35x35" ></label>
    <label><input> <img src="http://placehold.it/35x35" ></label>
    <label><input> <img src="http://placehold.it/35x35" ></label>
    <label><input> <img src="http://placehold.it/35x35" ></label>
</div>

如果单击图像，此代码运行两次，但是当我单击input或label元素时，只运行一次。如何阻止两次运行？

以下是示例：http://jsfiddle.net/00akgoe7/2/

Answer 1

这是因为标签的默认行为。要停止它，您需要告诉事件对象停止是默认行为，如下所示：

$('#hook label').on('click', function(ev) {
    ev.preventDefault();
    console.log('ok');
    icon = $(this).next('input').val();
});

单击与for属性相关联的标签或标签内的标签，将输入与“假”点击事件对焦。这就是为什么你通过扩展获得两次事件的原因，如果你点击输入，你也点击标签（父母）。

Answer 2

这是两次，因为当您点击标签时，它也会向输入发送点击事件，并且新事件会回到标签。这很棘手：）

所有浏览器都提供更好的表单可用性。

所以另一个可能的解决方案是：

$('label').click(function(e) {
    if (e.target.tagName === "LABEL") {
        alert("!! here")
    }
});

直播：http://jsfiddle.net/8qffhwm3/2/

Answer 3

您只需要添加一个preventDefault（）。

$('#hook label').on('click', function(e) {
    e.preventDefault();
    console.log('ok');
});

我希望它对你有帮助。

Answer 4

如果要阻止事件被触发两次，可以使用'mousedown'事件处理程序。它只会被触发一次，因为它不会通过单击标签触发标准。

Jquery：如何防止多次运行？

4 个答案: