复选框内的锚点击行为

请考虑以下代码段：

      
 Goooooogle 
  $(function() { var checkbox = $(''); checkbox.prependTo($('#a')); checkbox.click(function(e) { e.stopPropagation(); // do something useful }); });    

我想在找到一个复选框，并获得以下点击行为：

1. 像往常一样正常切换复选标记
2. 做一些有用的事情，比如AJAX请求
3. 留在这个页面上，即不被重定向到a href

此外，如果我单击a中的任何位置而不是单击复选框，我希望不覆盖默认行为。 即我想允许执行与点击本身相关联的所有事件处理程序。

我认为这应该很容易，但我不能得到理想的行为。 或者：

• 如果我提供了代码，我会被重定向到Google。
• 如果我使用return false; e.preventDefault() ，我不会切换复选标记return false; 。 此外，在这种情况下，复选框忽略显式checkbox.attr('checked', 'checked')以及设置复选标记的所有其他可能方法。

渔获量在哪里？

UPD：这在Chrome中可以正常运行，例如我没有在点击时重定向，但在Firefox中失败了。 有跨浏览器的方式吗？

Answer 1

好吧，它看起来像一个已知的Firefox错误 ，无论处理程序的代码如何，都会导致关闭复选框时出现以下链接。 作为一个有点脏的解决方法，可以使用：

 var checkbox = $(''); checkbox.prependTo($('#a')); checkbox.click(function(e) { setTimeout(function() { checkbox.prop('checked', !checkbox.prop('checked')); }, 10); // do something useful on clicking checkbox and but not surrounding link return false; }); 

Answer 2

我知道这是一个古老的问题，但有些人可能仍然很好奇，因为如果没有混乱的黑客或解决方法，它从来没有真正完全回答。 您所要做的就是检查事件目标的来源。

所以使用你的例子（ jsfiddle ）：

 // Don't change pages if the user is just changing the checkbox $("#a").click(function(e) { //e.preventDefault(); // Optional if you want to to keep the link from working normally alert("Click came from: " + e.target.tagName); if (e.target.tagName != "INPUT") { // do link alert("Doing link functionality"); } else { // do something useful alert("Doing checkbox functionality"); } }); 

Answer 3

我知道这个问题已经超过5年了，但我最近遇到了同样的问题，我找到的解决办法是在复选框和函数调用event.stopImmediatePropagation（）中添加一个onclick函数。

来自w3schools：“stopImmediatePropagation（）方法阻止调用同一事件的其他侦听器”

即…锚。

 function checkbox_onclick(event){ event.stopImmediatePropagation(); } 

Answer 4

这是一个修改过的脚本

 var checkbox = $(''); var a = $('#a'); a.unbind("click").click(function(e) { e.preventDefault(); checkbox.attr('checked', !checkbox.attr('checked')); }); checkbox.prependTo(a); checkbox.click(function(e) { e.stopPropagation(); // do something useful }); 

我取消绑定上的click事件并使用事件重新绑定它以检查/取消选中该复选框并阻止默认值。