onClick函数执行两次

时间:2014-02-04 17:14:17

标签: javascript html javascript-events onclick

点击checkbox或点击<tr>时,我试图让JavaScript正确执行。但是它似乎执行了两次代码;一次用于checkbox,一次用于<tr>

现在你可以说&#34;为什么不把它放在复选框上并用它完成?&#34;如果那么简单,我会做到这一点。但有人要求在点击<tr>checkbox时触发它。

现在为了增加一些复杂性,当onClick触发时,它会将数据发送回数据中的父节点,以便进行处理,直到更新为止。

子窗口(问题区域)

function FnSearch(urembroid, embroideryID){
  if (document.getElementById("embroid"+embroideryID).checked == false){
                    try {
                            parent.window.EmbroideryDataReturned("add", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("add", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = true;
            } else {
                    try {
                            parent.window.EmbroideryDataReturned("remove", embroideryID);
                    } catch(e) {
                            window.opener.parent.EmbroideryDataReturned("remove", embroideryID);
                    }
                    document.getElementById("embroid"+embroideryID).checked = false;
            }

子窗口HTML - 请注意PHP正在创建和字段。

echo "<tr id='embroideryData' onclick=\"javascript:FnSearch('" . $data['urembroidid'] . "', '".$data['EmbroideryID']."')\">"; // On a <tr> execute the update
    if (OrderKeyExists($data['EmbroideryID'])) {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."' checked='checked'/></td>";
    } else {
            echo "<td id='checkbox'><input type='checkbox' id='embroid".$data['EmbroideryID']."'/></td>";
    }
echo "</tr>\n";

我只需要执行一次此代码。单击<tr>时代码正常工作,但单击checkbox时执行两次。但是,当单击false时,它也会使父窗口中的数组混乱到可能有checkbox数据的位置。调试时,会向onClick发送FnSearch,就像checkbox最初是&#34; checked&#34;什么时候不是。所以它发送了一个&#34; remove&#34;到父母,但第二次完成相反。这导致数据完整性。

所以主要问题是:如何让checkbox只执行一次FnSearch

如果有人有任何意见,那将非常感谢!

1 个答案:

答案 0 :(得分:1)

有很多方法可以修复它......

(1)这是我修复同一问题的方式...因为我也想要自定义复选框......

您可以使用已选中和未选中框的图片而非复选框,并在tr点击上切换src ...

此外,您向所有checkbox提供了同样的身份td,但这些内容无效...

function toggleRowSelection(row){
   if(row.getElementsByTagName('img')[0].src == "checked.jpg")
       row.getElementsByTagName('img')[0].src = "unchecked.jpg"
   else
       row.getElementsByTagName('img')[0].src = "checked.jpg"
}

HTML(约)

<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>
<tr onclick="toggleRowSelection(this)"><td><img src="checked.jpg"></td></tr>

(2)使用event.target获取行中点击的元素,如果是td,请选中/取消选中复选框.....

如果checkbox只是执行您的操作

(3)同时检查 event.preventDefault() event.stopPropagation() ...它可能会对您有所帮助