博客

对应的HTML代码如下：

 <table  class="table table-hover">
                        <tr class="table table-row-cell" th:each="course,it: ${courseList}"
                            th:object="${course}" th:onclick="gethref(event)">
                            <td width="48" valign="top" align="center">
                                <input th:value="*{getParent().getId()}" type="hidden"></input>
                                <h2 th:text="${it.count}" style="max-width: 48px; max-height: 48px;"></h2>
                            </td>
                            <td width="auto" valign="middle">
                                <div>
                                        <span th:text="*{getUploader().getUserName()}"
                                              class="text text-info"></span>
                                </div>

                                <div><span th:text="*{getParent().getCourseName()}" class="span8"></span></div>
                            </td>
                            <td width="auto" class="text-right" valign="middle" >
                                <span  th:onclick="download_course()" class="glyphicon glyphicon-download"></span>
                            </td>
                        </tr>
                    </table>

整段代码的意思就是一个表格里的每一行都绑定了一个点击事件，只要点击就会触发一个js函数,但是现在的需求又需要在已经绑定事件的每一行的内部标签绑定点击事件。于是这步操作进行之后就出现问题了 ——-

点击行内的元素也会触发行点击事件，但是原本想要触发的行内元素绑定事件却不能够正常触发

了，而是需求只需要触发行内的元素点击事件，不需要触发行点击事件，那么问题来了，

怎么样做到屏蔽行点击事件，只触发行内元素点击事件呢？

网上略微搜索找到了解决办法：


在行内元素的点击事件对应的函数中调用event.stopPropagation();方法就可以阻止点击事件的传播扩散了

更具体的解决办法跳转：

http://t.csdn.cn/jY75v

添加链接描述