nkr*_*rkv 6 javascript checkbox jquery event-bubbling
请考虑以下代码段:
<!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>,并获得以下点击行为:
a href此外,如果我单击任何位置a,但我不希望覆盖默认行为,而不是复选框.即我想允许执行与aclick本身相关的所有事件处理程序.
我认为这应该很容易,但我不能得到理想的行为.或者:
e.preventDefault(),我不会切换复选标记return false;.此外,在该情况下,复选框忽略显式checkbox.attr('checked', 'checked')和所有其他可能的方式来设置复选标记.捕获量在哪里？
UPD:这在Chrome中按预期工作,例如我没有在点击时重定向,但在Firefox中失败.有跨浏览器的方式吗？
好吧，它看起来像一个已知的Firefox错误，无论处理程序的代码如何，都会导致单击复选框后出现以下链接。作为一种肮脏的解决方法，可以使用：
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;
});
我知道这是一个老问题，但有些人可能仍然很好奇，因为如果没有混乱的黑客或解决方法，它永远不会真正得到完全回答。您所要做的只是检查事件目标的来源。
所以使用你的例子（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");
}
});
这是修改后的脚本
var checkbox = $('<input type="checkbox"></input>');
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
});
我取消绑定单击事件，<a>并使用事件重新绑定它以选中/取消选中复选框并防止默认值。
| 归档时间： |
|
| 查看次数： |
8728 次 |
| 最近记录： |