使用javascript捕获列表项上的单击

我有一个嵌套列表，用于显示可折叠项。问题是，我似乎无法区分单击父对象和单击子对象。这是我的密码：

function myFunction(elmnt) {

var child=(elmnt.firstElementChild||elem.firstChild)


if (child.style.display == 'block') {

child.style.display = 'none'
} else {
child.style.display = 'block'    
child.style.listStyleType = "none";
}

}

以下是我的嵌套项目列表：

<li class="List" onclick="myFunction(this)">
                Recently Viewed
                <ul class="Items">
                    <div>
<table class="myclass">
<tr>
<td class="title_check"><input type="checkbox"></td>
<td class="name"><img class="line" src="line.png">Name</td>
<td class="name"><img class="line" src="line.png">Report Type</td>
<td class="name"><img class="line" src="line.png">Modified On</td>
<td class="name"><img class="line" src="line.png">Description</td>
</tr></table>

<table class="myclass">
<tr>
<td class="check"><input type="checkbox"></td>
<td class="name">Report 1</td>
<td ></td>
<td ></td>
<td ></td>
</tr></table>

<table class="myclass">
<tr>
<td class="check"><input type="checkbox"></td>
<td class="name">Report 2</td>
<td ></td>
<td ></td>
<td ></td>
</tr></table>



                </ul>

---

问题是，当我单击其中一个嵌套子项旁边的复选框时，会调用该函数并折叠父项。是否有办法区分单击父项和单击子项？

在控制父项的函数中，收集事件对象，并查看event.target是否引用父项。如果是，则执行该函数。如果它引用了复选框，则不执行

<li class="List" id="item-list" onclick="myFunction(this, event)">//pass event to your function

function myFunction(elmnt, event) {
if(event.target.id !== "item-list") {
    return;
}

var child=(elmnt.firstElementChild||elem.firstChild)


if (child.style.display == 'block') {

child.style.display = 'none'
} else {
child.style.display = 'block'    
child.style.listStyleType = "none";
}

}

试试这个

修改您的JS和HTML代码，将单击功能包含在跨度上，而不是li上

HTML代码：

<ul>
<li class="List" >
    <span onclick="myFunction(this)">Recently Viewed</span>
                <ul class="Items">
                    <div>
<table class="myclass">
<tr>
    <td class="title_check"><input type="checkbox"/></td>
    <td class="name"><img class="line" src="line.png"/>Name</td>
    <td class="name"><img class="line" src="line.png"/>Report Type</td>
    <td class="name"><img class="line" src="line.png"/>Modified On</td>
    <td class="name"><img class="line" src="line.png"/>Description</td>
</tr></table>

<table class="myclass">
<tr>
    <td class="check"><input type="checkbox"/></td>
<td class="name">Report 1</td>
<td ></td>
<td ></td>
<td ></td>
</tr></table>

<table class="myclass">
<tr>
    <td class="check"><input type="checkbox"/></td>
<td class="name">Report 2</td>
<td ></td>
<td ></td>
<td ></td>
</tr></table>

    </div>
    </ul>
    </li>
                </ul>

---

我该怎么做？我尝试在函数中放入alertevent.target，但这不起作用。我放入alertelmnt.className以在单击对象时查看其类名。当我同时单击父级和子级时，类名是List。因此，即使我单击子级，获取事件的还是父级。我不知道是否有办法解决这个问题。我刚刚意识到你已经通过了这个对象，所以我用它来编辑我的答案。谢谢。我尝试了这个方法，但问题是我的JavaScript行尝试查看子块的显示状态，而不是none，它不起作用，因为Span没有子块。很抱歉，我没有看到您对脚本所做的更改。我加了这个，它成功了！非常感谢你。

function myFunction(elmnt) {
var child = elmnt.nextElementSibling;
//var child=(elem.firstElementChild||elem.firstChild)


if (child.style.display == 'block') {

child.style.display = 'none'
} else {
child.style.display = 'block'    
child.style.listStyleType = "none";
}

}