javascript jQuery单击事件一键触发多次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14856091/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery click event triggered multiple times off one click
提问by freeMagee
I am having trouble with multiple clicks being registered in jQuery when only one element has been clicked. I have read some other threads on Stack Overflowto try and work it out but I reckon it is the code I have written. The HTML code is not valid, but that is caused by some HTML 5 and the use of YouTube embed code. Nothing that affects the click.
当仅单击一个元素时，我在 jQuery 中注册多次单击时遇到问题。我已经阅读了Stack Overflow上的一些其他线程来尝试解决它，但我认为这是我编写的代码。HTML 代码无效，但这是由某些 HTML 5 和使用 YouTube 嵌入代码引起的。不会影响点击。
The jQuery, triggered on document.ready
jQuery，在 document.ready 上触发
function setupHorzNav(portalWidth) {
$('.next, .prev').each(function() {
$(this).click(function(e) {
var target = $(this).attr('href');
initiateScroll(target);
console.log("click!");
e.stopPropagation();
e.preventDefault();
return false;
});
});
function initiateScroll(target) {
var position = $(target).offset();
$('html, body').animate({
scrollLeft: position.left
}, 500);
}
}
Example HTML
示例 HTML
<nav class="prev-next">
<a href="#countdown-wrapper" class="prev">Prev</a>
<a href="#signup-wrapper" class="next">Next</a>
</nav>
In Firefox one click can log a "Click!" 16 times! Chrome only sees one, but both browsers have shown problems with the above code.
在 Firefox 中，单击可以记录“Click!” 16次！Chrome 只看到了一个，但是两个浏览器都显示了上面代码的问题。
Have I written the code wrongly or is there a bug?
我写错了代码还是有错误？
-- Some extra info ------------------------------------------
-- 一些额外的信息 ------------------------------------------
setupHorzNav is called by another function in my code. I have tested this and have confirmed it is only called once on initial load.
setupHorzNav 被我的代码中的另一个函数调用。我已经对此进行了测试，并确认它仅在初始加载时调用一次。
if ( portalWidth >= 1248 ) {
wrapperWidth = newWidth * 4;
setupHorzNav(newWidth);
}
else
{
wrapperWidth = '100%';
}
There are mutiple instances of nav 'prev-next'. All target different anchors. All are within the same html page.
有多个 nav 'prev-next' 实例。所有针对不同的锚点。所有都在同一个 html 页面中。
<nav class="prev-next">
<a href="#video-wrapper" class="prev">Prev</a>
</nav>
回答by Fraz Sundal
Try unbinding the click event like this
尝试像这样解除绑定点击事件
$(this).unbind('click').click(function (e) {
});
回答by Hari Pachuveetil
You don't need .each()for binding event handlers. Try this instead:
您不需要.each()绑定事件处理程序。试试这个：
$('.next, .prev').click(function(e){
var target = $(this).attr('href');
initiateScroll(target);
console.log("click!");
e.stopPropagation();
e.preventDefault();
return false;
});
EDIT:I think it is the way you are attaching the event handler from within the setupHorzNavfunction that is causing it. Change it to attach it only once from say, $(document).ready()or something.
编辑：我认为这是您从setupHorzNav导致它的函数中附加事件处理程序的方式。将其更改为仅从 say$(document).ready()或其他内容中附加一次。
I have managed to get the situation of multiple event handlers by attaching the event handlers from a function that gets called from event handler. The effect is that the number of click event handlers keeps increasing geometrically with each click.
通过从从事件处理程序调用的函数中附加事件处理程序，我设法获得了多个事件处理程序的情况。效果是每次单击时，单击事件处理程序的数量会呈几何级数增加。
This is the code: (and the jsfiddledemo)
这是代码：（和jsfiddle演示）
function setupNav() {
$('.next, .prev').each(function () {
$(this).click(function (e) {
setupNav();
var target = $(this).attr('href');
console.log("click!");
e.stopPropagation();
e.preventDefault();
return false;
});
});
}
setupNav();
See how calling the setupNav()function from the click event handler adds multiple eventhandlers (and the clicklog message) on successive clicks
了解setupNav()从单击事件处理程序调用该函数如何click在连续单击时添加多个事件处理程序（和日志消息）
回答by techfoobar
Since it is not clear from your question whether you are calling the binding function multiple times, a quick and dirty fix would be:
由于您的问题不清楚您是否多次调用绑定函数，因此快速而肮脏的解决方法是：
$('.next, .prev').unbind('click').click(function() {
...
});
What you are doing here is unbindingany previously bound event handlers for clickand binding afresh.
您在这里所做的是解除绑定任何先前绑定的事件处理程序click并重新绑定。
回答by ieeehh
Are there no other click bindings elsewhere?
其他地方没有其他点击绑定吗？
Are you loading the page with ajax?
你是用ajax加载页面吗？
You could also try this:
你也可以试试这个：
$('.next, .prev').click(function (e) {
var target = $(this).attr('href');
initiateScroll(target);
console.log("click!");
e.stopPropagation();
e.preventDefault();
return false;
});
