Question

我有一个表，该表有一堆行，需要将它们同时进行编辑和删除。我制作了一个<div>，其中包含几个按钮，当行悬停时，这些按钮要显示在相关位置。一切都很好。我还希望当鼠标离开桌子本身时按钮消失。好的，我想使用mouseleave事件。不幸的是，当鼠标也进入按钮<div>时，就会触发此操作，从而导致反馈循环，其中按钮会不断显示和隐藏。

这很难描述，但是希望这是说明性的：https://jsfiddle.net/8d726rqt/

我确实已经尝试找到答案，并且在很多地方显示和隐藏的项是父元素的子项，但对我而言并非如此，因此这些解决方案不起作用。此外，通常建议使用pointer-events: none。 起作用，但是按钮不接收点击事件，因此无法发挥作用。

Answer 1

#edit-control不在#top-level-table内部。因此，当#edit-control出现并且鼠标悬停在其上方时，它将触发mouseleave事件。然后按钮消失，鼠标再次进入表格。因此按钮再次出现。并变成一个循环，其中按钮不断显示隐藏状态。

我建议将mouseleave事件添加到#edit-control和#top-level-table的包装div中。

$(function()
  {
  $('.list-row').mouseover(function()
                           {
    var offset = $(this).offset();
    $('#edit-controls').css({
      'top': offset.top + 10,
      'left': offset.left + 10
    }).fadeIn();
    //console.log('fadein');
  });
  
  //change to this element with mouseleave event
  $('#table-wrapper').mouseleave(function()
                                   {
   // console.log('fadeout');
    $('#edit-controls').fadeOut();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
        <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <div class="container">
            <div class="table-responsive" id="table-wrapper">
                <table id="top-level-table" class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>Table</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                        <tr class="list-row">
                            <td>Content<br><br>Things</td>
                        </tr>
                    </tbody>
                </table>
                <div id="edit-controls" style="display:none; position:absolute; z-index:1" >
                    <button type="button" class="btn btn-primary">Edit</button>
                    <button type="button" class="btn btn-danger">Delete</button>
                </div>
            </div>
        </div>
    </body>
</html>

Answer 2

如果按钮阻止放置在桌子以外的其他位置，则可以使用此解决方案：

<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script crossorigin="anonymous" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script crossorigin="anonymous" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="container">
        <div class="table-responsive">
            <table id="top-level-table" class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Table</th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                    <tr class="list-row">
                        <td>Content<br><br>Things</td>
                    </tr>
                </tbody>
            </table>
            <div id="edit-controls" style="display:none; position:absolute; z-index:1">
                <button id="edit" type="button" class="btn btn-primary">Edit</button>
                <button id="delete" type="button" class="btn btn-danger">Delete</button>
            </div>
        </div>
    </div>
</body>

$(function()
  {
  $('.list-row').mouseover(function()
                           {
    var offset = $(this).offset();
    $('#edit-controls').css({
      'top': offset.top + 10,
      'left': offset.left + 10
    }).fadeIn();
    console.log('fadein');
  });

  $('#top-level-table').mouseleave(function(event)
                                   {
    if (event.relatedTarget.id !== 'edit' &&
    event.relatedTarget.id !== 'delete' &&
        event.relatedTarget.id !== 'edit-controlls')        {
        $('#edit-controls').fadeOut();
    }
  });
});

这是jsfiddle：https://jsfiddle.net/kinos/pbg8dhvr/13/

Answer 3

在div属性上：

<div onMouseLeave={(e) => e.preventDefault()}>
....
</div>

当绝对定位的元素被覆盖时，忽略mouseleave事件

3 个答案: