如何避免JS事件被重复触发

例1：
<tr>
  <td><input type="checkbox" /></td>
  <td>...</td>
  ...
</tr>
想实现效果：点击TR时整行变色，该行checkbox被选上，再次点击则取消选择。
但：为TR加上事件后checkbox用不了了，因为点它时触发了TR的事件，把刚选上的取消了。例2：
在用灯箱效果时，点击前面的DIV会把叠在后面的DIV事件也一起触发了。怎么避免类似的问题呢？

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
        <title></title>
        <script type="text/javascript">        var row0;        window.onload = function()
            {
                row0 = document.getElementById("row0");
                row0.setAttribute("clicked", false);
            }        function clickEvent(oEvent)
            {
                var sColor = row0.style.backgroundColor;
                row0.style.backgroundColor = (sColor == "#ffffcc") ? "#fff" : "#ffffcc";
                
                if (row0.getAttribute("clicked") == false)
                {
                    row0.firstChild.lastChild.checked = true;
                    row0.setAttribute("clicked", true);
                }
            }
            
        </script>
    </head>
    <body>
    <table><tr id="row0" onclick="clickEvent(event)"><td>性格<input type="checkbox" /></td></tr></table>
    </body>
    </html>