HTML中处理鼠标点击事件重叠的一种方式

最新推荐文章于 2024-10-03 10:29:01 发布

转载最新推荐文章于 2024-10-03 10:29:01 发布 · 626 阅读

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://t.csdn.cn/jY75v

文章讨论了一个HTML表格中行级和内联元素点击事件的问题。当前实现中，行的点击会触发一个JavaScript函数，但同时也阻止了行内元素独立的点击事件。解决方案是，在内联元素的点击事件处理函数中调用event.stopPropagation()，以防止事件冒泡到行级别，允许内联元素的事件正常触发。

对应的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添加链接描述

标签