按钮 onclick 函数触发两次

Posted 2023-02-24

【中文标题】按钮 onclick 函数触发两次

【英文标题】：button onclick function firing twice

【发布时间】：2013-12-02 00:32:22

【问题描述】：

我有一个使用事件处理程序调用 javascript 函数的按钮。由于某种原因，事件处理程序被调用了两次。

这是我的按钮（我使用 php 对象来生成代码，这就是为什么有很多空标签的原因）：

<button name="addToCart" value="" size="" onclick="" src="" class="addToCartButton" id="0011110421111" type="button" formtarget="_self" formmethod="post" formaction="" data-mini="true"   placeholder="" data-mini="1" onkeypress="" >Add To Cart</button>

这是我的事件处理程序：

$('.addToCartButton').click(function() 
    alert("bob");
    //addToCart($(this).attr("id"));
);

在这里，我收到了两次警报。

我曾尝试在按钮的 onclick 属性中调用函数 addToCart，但如果我这样尝试，我会收到此错误：

TypeError: '[object htmlButtonElement]' is not a function (evaluating 'addToCart(0011110421111)')

我也尝试过 event.preventDefault() 和 event.stopPropagation()，但都没有成功。

任何想法为什么会发生这种情况，或者我可以做些什么来阻止它执行两次，或者如果我从 onclick="" 调用 javascript 函数可能会出现错误？

【问题讨论】：

您可能调用了分配事件两次的代码！

JSFIDDLE 会很好

为什么有这么多空白属性？

$._data( $(".addToCartButton")[0], "events" ).length 告诉你什么？它应该返回绑定到按钮的事件数。

我的错误。这样做：打开 Chrome 浏览器，转到您的网站，按 F12，单击console 选项卡并粘贴：$._data( $(".addToCartButton")[0], "events")。包含绑定到您的按钮的所有事件的对象将打印到控制台。 click 属性应该是一个包含多个元素的数组。展开它们中的每一个并右键单击处理函数。选择“显示函数定义”，您应该会看到代码中每个处理程序的定义位置。这样你就可以找到你的副本了。

【参考方案1】：

也许您在同一个按钮上附加了两次事件。您可以做的是取消绑定任何以前设置的点击事件，如下所示：

$('.addToCartButton').unbind('click').click(function() 
    alert("bob");
    //addToCart($(this).attr("id"));
);

这适用于所有附加事件（鼠标悬停、鼠标悬停、单击...）

【讨论】：

.off().on() 可能更流行

由于这个答案可能有效，我不会-1它。但我强烈反对通过撤消来解决问题，而不是找到真正的问题并消除它。

@matewka 我也会继续寻找实际问题。感谢您的建议。

@matewka 好的，我在评论下方回复了。

@matewka：感谢您的建议，值得剩余。它使我免于弄乱我的代码。恕我直言，答案不值得 -1 也是因为它指出了许多人可能会做的不那么明显的问题：在同一个对象上设置两次事件侦听器。

【参考方案2】：

你可能想传入事件并添加

$('.addToCartButton').click(function(e) 
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
);

或

$('.addToCartButton').click(function(e) 
  e.preventDefault(); //Added this
  alert("bob");
  //addToCart($(this).attr("id"));
  return false;
);

【讨论】：

OP 说没用。

OP 说的是 preventDefault，他没有说返回 false。

反正preventDefault不是属性而是函数。

【参考方案3】：

我的事件触发了两次，因为我不小心同时包含了 my_scripts.js 和 my_scripts.min.js。确保只包含一个。

【讨论】：

我欠你一大桶啤酒 :) 干杯。

【参考方案4】：

从选择器中取消绑定事件并在 DOM 中的元素中再次附加后触发特定选择器上的事件.. $("selector_name").unbind("event"); //在选择器上的这个调用事件之后..

例如：

$( "#button" ).unbind( "click" );

$("#button").click(function(event) 
console.log("button click again);
);

【参考方案5】：

只是为了记录以防其他人遇到同样的问题，我遇到了同样的问题，根本原因是有 3 个具有相同 ID 的按钮，单击一个后，另外两个也触发了他们的 OnClick 事件。 .

【参考方案6】：

对我来说，我发现我的事件没有绑定到我的映射组件。相关答案在Why is my onClick being called on render? - React.js，但为了提供一些见解，我复制了下面的一些答案（希望这会有所帮助！）：

1.使用.bind

activatePlaylist.bind(this, playlist.playlist_id)

2.使用箭头函数

onClick= () => this.activatePlaylist(playlist.playlist_id) 

3.或从activatePlaylist返回函数

activatePlaylist(playlistId) 
  return function () 
     // you code 
  

【参考方案7】：

对于此类错误：

可能是您绑定了重复的事件 在预期的侦听器完成侦听并完成之后，事件处理程序可能会被连接两次，或可能事件没有被解除绑定他们的工作。

在这种情况下，一旦您不再需要监听，就需要对监听器进行解除绑定操作。

【参考方案8】：

我来这里是为了寻找答案。事实证明，我的并没有完全发射两次。它会触发，然后当我稍后点击其他内容时，它也会触发该点击。

我有一个容器 div，上面有一个点击监听器。 在那个 div 里面，有一个可点击的链接。

点击链接也会触发容器的点击事件。

我花了一些时间进行 unbind('click') / rebind 实验，但没有什么令人满意的。最后，我只是在容器点击事件中添加了一个条件，以便它仅在点击目标不是锚点时运行：-

    if (e.target.tagName !== 'A')     
        alert("bob");
        //addToCart($(this).attr("id"));
    );