Javascript onClick()问题

Question

下面是我的表格，每一行都有两个onClick事件。当我点击每一行时，它会调用我定义的方法，但现在你可以看到最后一列有一个复选框。我想知道如果单击这个复选框，是否可能不需要在Javascript的onClick中调用这个方法？ 注意：此处正在运行php while循环：

echo "<tr onclick='getDetails($cdid), visited(this);'>";                
echo "<td class='' valign='top' align='left' width='20'>$companyName</td>";
echo "<td class='' valign='top'>$family_name</td>";
echo "<td class='' valign='top'>$given_name</td>";
echo "<td class='' valign='top'>$department</td>";
echo "<td class='' valign='top'>$title<input type='checkbox' name='add_to_project'/></td>";    
echo "</td>";
echo "</tr>";

更新:

获取细节函数(id) {

    try { 
        keepcontact = false;
        if($("#contentText").val() != "" && $("#contentText").val() != null)
        {
            var toCharNotes = $('#saveToChrNote').is(':checked');
            //AUTO save the charnotes if is checked without prompt
            if( toCharNotes == true ){
                var formData = new FormData($("#addNewNotes").parents('form')[0]);      
                    var cid=$(this).parents('form:first').find('#cdid').val();

                    $.ajax({
                        url: 'response.php',
                        type: 'POST',
                        xhr: function() {
                            var myXhr = $.ajaxSettings.xhr();
                            return myXhr;
                        },
                        success: function(data){                      
                          getDetails2(id);  


                        }, 
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false
                    });
            } else {
                var saveNote = confirm("Save or clear Enter Note before proceeding ?");
                if (saveNote == true) {
                    var formData = new FormData($("#addNewNotes").parents('form')[0]);      
                    var cid=$(this).parents('form:first').find('#cdid').val();

                    $.ajax({
                        url: 'response.php',
                        type: 'POST',
                        xhr: function() {
                            var myXhr = $.ajaxSettings.xhr();
                            return myXhr;
                        },
                        success: function(data){                      
                          getDetails2(id);  


                        }, 
                        data: formData,
                        cache: false,
                        contentType: false,
                        processData: false
                    });

                } else {
                    keepcontact = true;
                    // do nothing.. :D
                    //getDetails2(id);
                }
            }
        } 
        else{
            getDetails2(id);
        }
    }
    catch(err){
        alert(err);
    } 
}

- Shibbir

---

停止复选框点击事件的传播，例如：$（'[name=add_to_project]'）.on（'click'，function（e）{e.stopPropagation();}）; - A. Wolff

@A.Wolff 这行代码应该放在哪里？是在 getDetails 和 visited 方法中吗？ - Shibbir

你可以将新的点击事件处理程序绑定到所有特定复选框上，或者你可以在 getDetails()/visited() 方法中筛选事件目标。如果你需要更具体的帮助，你需要提供完整的最简代码示例来复制所提出的问题，并可能需要一个 jsFiddle。无论如何，你都不应该使用内联脚本来绑定事件。 - A. Wolff

@A.Wolff 我向我的问题中添加了 getDetails() 方法。 - Shibbir

@A.Wolff 简单而最佳的答案 :) - Shibbir

Answer 1

只需稍微修改您的函数即可

function visited(a)
{
 if(a.getAttribute("name")=="add_to_project") return;
// Rest of the code of your function

}

将这行代码放在函数 visited 的顶部。

if(a.getAttribute("name")=="add_to_project") return;

稍微修改一下 PHP

echo "<tr onclick='getDetails($cdid, this), visited(this);'>";                

并修改getDetails函数

function getDetails(a, b) 
{
if(b.getAttribute("name")=="add_to_project") return;
// Rest of the function

}

- void

---

我将getDetails()方法添加到我的问题中。你能告诉我你的代码应该放在哪里吗？ - Shibbir

1. a 总是指向 <tr>，因此它从未具有名称为 "add_to_project" 的 name 属性。
2. a 不是 jQuery 对象，因此 .attr() 会导致错误。请在发布代码之前检查它。

- Regent

@void 我正在尝试，但它显示：ReferenceError: Id未定义。 - Shibbir

Answer 2

您可以在 handler 的末尾使用 return false; 来停止事件冒泡。 请尝试此演示场景，

HTML :

<table id="infoTable">
    <tr>
        <td>Click Here</td>
        <td>
            <input type="checkbox" id="innerCheckBox" />
        </td>
    </tr>
</table>

jQuery：

$("#infoTable tr").on("click", function(){
    alert("tr");
});

$("#innerCheckBox").on("click", function(){
    alert("checkbox");
    return false;
});

jsFIddle

{{链接1：jsFiddle}}

- Md Ashaduzzaman