怎样在点击大div的时候不去触发小div的点击事件？

吃瓜日常 2019-05-21 02:43:26

现在工作中碰到一个问题，是要在点击不同的div时触发不同的点击事件，但是有的div是在较大的div里包裹的，而这样的话点击大的div，小div的点击事件也会触发，怎样能让点击小div的时候才触发的点击事件，代码如下，是一个用easyui，tab控件写的

<div style="border: thin solid #808080; height: 650px; width: 100%; padding: 20px 20px 20px 20px;

                    background-color: #CEE8FF; text-align: center; border-radius: 8px;">

                    <h2>

                        SmartQuery</h2>

                    <div runat="server" class="easyui-tabs" data-options="tools:'#tab-tools'" style="width: 100%;

                        height: 500px">

                        <div id="div1" title="PanelID" style="padding: 10px;" class="bg-success">

                            <table id="dg" class="easyui-datagrid" title="PaneID" data-options="singleSelect:true,collapsible:true">

                                <thead>

                                    <tr>

                                        <th data-options="field:'itemid',width:80">

                                            Item ID

                                        </th>

                                        <th data-options="field:'productid',width:100">

                                            Product

                                        </th>

                                        <th data-options="field:'listprice',width:80,align:'right'">

                                            List Price

                                        </th>

                                        <th data-options="field:'unitcost',width:80,align:'right'">

                                            Unit Cost

                                        </th>

                                        <th data-options="field:'attr1',width:250">

                                            Attribute

                                        </th>

                                        <th data-options="field:'status',width:60,align:'center'">

                                            Status

                                        </th>

                                    </tr>

                                </thead>

                            </table>

                            <div id="div2" class="easyui-tabs" data-options="fit:true,plain:true">

                                <div title="ProdID" style="padding: 10px;" class="easyui-tabs" data-options="tools:'#tab-tools'">

                                    <div title="BOM" style="padding: 10px;">

                                        Content 1</div>

                                </div>

                                <div title="工單" style="padding: 10px;" class="easyui-tabs" data-options="tools:'#tab-tools'">

                                    <div title="工單BOM" style="padding: 10px;">

                                        Content 1</div>

                                </div>

                                <div title="生產" style="padding: 10px;">

                                    Content 3</div>

                                <div title="物料" style="padding: 10px;">

                                    Content 3</div>

                                <div title="機台" style="padding: 10px;">

                                    Content 3</div>

                            </div>

                        </div>

                        <div title="SN" style="padding: 10px" class="alert-success">

                            <asp:GridView ID="GridView1" runat="server">

                            </asp:GridView>

                        </div>

                        <div title="箱號" style="padding: 10px;" class="alert-success">

                            <div class="easyui-tabs" data-options="tools:'#tab-tools'">

                                <div title="Title1" style="padding: 10px;">

                                    入庫倉別</div>

                                <div title="Title2" style="padding: 10px;">

                                    Content 2</div>

                            </div>

                        </div>

                    </div>

                </div>