考虑以下代码段:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
</head>
<body>
<form>
<a id="a" href="http://google.com">Goooooogle</a>
</form>
<script>
$(function() {
var checkbox = $('<input type="checkbox"></input>');
checkbox.prependTo($('#a'));
checkbox.click(function(e) {
e.stopPropagation();
// do something useful
});
});
</script>
</body>
</html>
我想在 <a> 中得到一个复选框，并获得以下点击行为:
- 像往常一样正常切换复选标记
- 做一些有用的事情，比如 AJAX 请求
- 留在这个页面上，即不会被重定向到
a href
此外，如果我单击 a 中的任何位置，我也不想覆盖默认行为，但不在复选框上。 IE。我想允许执行与 a 关联的所有事件处理程序点击自身。
我认为这应该很容易，但我无法获得所需的行为。要么:
- 如果输入提供的代码，我会被重定向到 Google。
- 如果我使用
e.preventDefault()，我不会切换复选标记的return false;.此外，在那种情况下，复选框会忽略显式checkbox.attr('checked', 'checked')以及设置复选标记的所有其他可能方法。
问题在哪里？
UPD:这在 Chrome 中按预期工作，例如我没有在点击时重定向，但在 Firefox 中失败了。有没有跨浏览器的方式？
最佳答案
嗯，它看起来像一个已知的 Firefox bug ，无论处理程序的代码如何，都会导致单击复选框时出现以下链接。作为一种有点肮脏的解决方法，可以使用:
var checkbox = $('<input type="checkbox"></input>');
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;
});
关于javascript - anchor 击行为中的复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8094483/