想做一个效果，一个tr下面有三个td，给tr注册了一个onmouseover事件，弹出一些内容。问题是，将鼠标放在这个tr的每个td都会触发这个事件，想让

llllllxj 2018-08-07 09:49:28

想做一个效果，一个tr下面有三个td，给tr注册了一个onmouseover事件，弹出一些内容。问题是，将鼠标放在这个tr的每个td都会触发这个事件，想让这个事件值触发一次。求大神解决

...全文

188 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

llllllxj 2018-08-08

打赏
举报

谢谢使用onmouseenter事件阻止事件冒泡，完美解决

天际的海浪 2018-08-07

打赏
举报

改用onmouseenter事件

IEEE_China 2018-08-07

打赏
举报

试试看，第一行和第二行是不是一样



<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link href="css/bootstrap.css" rel="stylesheet" />

    <script src="JSript/jquery-2.1.4.js"></script>

    <script src="JSript/bootstrap.js"></script>

    <script>

        $(function () {

            $('tr').mouseover(function (event) {

                $('#divtips').text($(this).text()); 

            });

            $('.first').mouseover(function (event) { 

                $('#divtips').text($(this).text());

            });

            $('.second').mouseover(function (event) {

                event.stopPropagation();//阻止事件冒泡 

                $('#divtips').text($(this).text());

            });

        });

    </script>

</head>

<body>

    <div class="container">

        <div class="row">

            <div class="col-md-12">

                <table class="table table-bordered">

                    <tr>

                        <td class="first">

                            第一个tr 第1个td 触发

                        </td>

                        <td class="first">

                            第一个tr 第2个td 触发

                        </td>

                        <td class="first">

                            第一个tr 第3个td 触发

                        </td>

                    </tr>

                    <tr>

                        <td class="second">

                            第二个tr 第1个td

                        </td>

                        <td class="second">

                            第二个tr 第2个td

                        </td>

                        <td class="second">

                            第二个tr 第3个td

                        </td>

                    </tr>

                </table>

            </div>

             

            <div class="col-md-12" id="divtips">



            </div>

        </div>

    </div>



</body>

</html>