javascript - 我希望 javascript 在 单击时执行

Question

我想在用户单击列表项时弹出一个模式弹出窗口。弹出窗口在用户单击按钮时起作用，但我希望它在用户单击列表项时起作用。

我尝试在列表项中添加 onClientClick 但这不起作用。

这是我的javascripts

<script type="text/javascript">
    function ShowModalPopup() {
        $find("mpe").show();
        return false;
    }
        function HideModalPopup() {
        $find("mpe").hide();
        return false;
    }
</script>

<div class="drag-options" id="options5"></div>
<ul class="drag-inner-list" id="5">
    <li class="drag-item"></li>
    <li class="drag-item"></li>
    <li class="drag-item">
        <asp:Button ID="btnShow" runat="server" Text="Show Modal Popup" OnClientClick="return ShowModalPopup()" />
        <asp:LinkButton ID="lnkDummy" runat="server"></asp:LinkButton>
        <cc1:modalpopupextender id="ModalPopupExtender1" behaviorid="mpe" runat="server"
            popupcontrolid="pnlPopup" targetcontrolid="lnkDummy" backgroundcssclass="modalBackground">
                    </cc1:modalpopupextender>
        <asp:Panel ID="pnlPopup" runat="server" CssClass="modalPopup" Style="display: none">
            <div class="header">
                Modal Popup
            </div>
            <div class="body">
                This is a Modal Popup.
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox>
                <asp:TextBox ID="TextBox4" runat="server"></asp:TextBox>
                <br />
                <asp:Button ID="btnHide" runat="server" Text="Hide Modal Popup" OnClientClick="return HideModalPopup()" />
            </div>
        </asp:Panel>
    </li>
    <li class="drag-item"></li>
</ul>
</li>
        <li class="drag-column drag-column-approved">
            <span class="drag-column-header">
                <asp:Label ID="Label6" runat="server" Text="Label">Approved</asp:Label>
            </span>
            <div class="drag-options" id="options6"></div>
            <ul class="drag-inner-list" id="6">
                <li class="drag-item"></li>
                <li class="drag-item"></li>
            </ul>
        </li>
</ul>
</div>

我希望 li 中的 OnClientClick 起作用。感谢您的帮助。

Answer 1

您可以使用 getElementsByTagName 将所有列表项存储在一个数组中，然后遍历它们以添加 onclick 处理程序:

var listItems = document.getElementsByTagName("li")

for (var i = 0; i < listItems.length; i++) { 
    listItems[i].addEventListener("click", function(event) {
        console.log("list item clicked");
    });
}