0

我有这个标记：

<fieldset class="checkbxr full small" onclick="alert('test')">
    <label for="" class="fat_label">Category</label>
    <input type="checkbox" name="true_checkb" id="">
    <span class="dmy_checkb"></span>
</fieldset>

这是一些虚拟复选框解决方案。一切都很好，但我需要onclick为整个事件挂钩fieldset。因此，如果我喜欢下面的内容，我有 3 个警报，针对所有元素 inisde，所以我的事件会触发 3 次。如何仅设置fieldset并进行一次事件调用？谢谢帮助。

这是用 js 和一些 css 摆弄：http: //jsfiddle.net/VeT6y/

4

1 回答 1

0

您需要根据点击的内容取消冒泡事件......这是一个执行此操作的脚本（在纯 javascript 中 - 在 jQuery 中更容易做到 - 因为您可以检查事件源上是否有一个类例如然后取消它）。此脚本检查单击的标签是否为 FIELDSET，如果不是取消气泡，是否弹出警报。

小提琴http://jsfiddle.net/YK3TU/2/

代码：

HTML：

<fieldset class="checkbxr full small" onclick="javascript:doSomething()">
    <label for="" class="fat_label">Category</label>
    <input type="checkbox" name="true_checkb" id="">
    <span class="dmy_checkb"></span>
</fieldset>

Javascript：

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
        targ = targ.parentNode;
    console.log(targ)
    if (targ.tagName!="FIELDSET") {
     cancelBubble(e)   
    } else {
     doMyThing()   
    }
}
function cancelBubble(e) {
 var evt = e ? e:window.event;
 if (evt.stopPropagation)    evt.stopPropagation();
 if (evt.cancelBubble!=null) evt.cancelBubble = true;
}
function doMyThing(){
    alert("this is a test")

}
于 2013-08-07T11:59:53.707 回答