Jquery:如何防止多次运行

Jquery: how to prevent running multiple times?

本文关键字：运行 何防止 Jquery      更新时间：2023-09-26

对不起，我的母语不是英语。

我的代码有问题。我在页面上有这样的内容:

$('#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>

如果我点击image，这段代码会运行两次，但是当我点击input或label元素时只运行一次。我怎样才能避免运行两次?

示例如下:http://jsfiddle.net/00akgoe7/2/

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

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

单击与for属性相关联的标签或在标签内，使用"假"单击事件聚焦输入。这就是为什么您会获得两次事件，因为通过扩展，如果您单击输入，您也会单击标签(父)。

这是两次，因为当你点击标签它发送一个点击事件也到输入和新的事件气泡返回到标签。这很棘手:)

为了更好的表单可用性，它在所有浏览器中都有。

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

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

试运行:http://jsfiddle.net/8qffhwm3/2/

您只需要添加一个preventDefault()。

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

我希望它能帮助你。

如果你想防止事件被触发两次，你可以使用'mousedown'事件处理程序。它只会触发一次，因为它不是通过点击标签来触发的。

相关文章：