关闭按钮在 div 内的 jQuery 中不起作用

Question

我有一个名为 datahover 的 Div，我在其中放置了 jquery，这样如果我在该 Div 内部单击它就不会隐藏，但是当我在该 Div 外部单击它时它会隐藏。但问题是关闭按钮位于该 div 内，因此当我单击该关闭按钮时，Div 并未隐藏。

这里的关闭按钮是a标签，里面有I标签。

HTML 代码：

<div class="datahover">                                                    
    <a href="javascript:void(0);"><i class="fa fa-times" aria-hidden="true"></i></a>
    <div class="facultydata">
        <div class="leftside">
            <img src="deepak.jpg">
            <h3>Deepak Chaudhary</h3>
        </div>
        <div class="table-responsive";          
            <table class="table">
                <tbody>
                   <tr>   
                        <th>Designation</td> 
                        <td>ME</td>
                    </tr>
                    <tr>
                        <th>Qualification</td>
                        <td>CE</td>
                    </tr>
                    <tr>
                        <th>Teaching Experience</td>
                        <td>8 Years</td>
                    </tr>
                    <tr>
                        <th>Industry Experience</td>
                        <td>7 Years</td>
                    </tr>
                    <tr> 
                        <th>Department</td>
                        <td>Computer</td>
                    </tr>
                    <tr>
                        <th>Area</td>
                        <td>All</td>
                    </tr>
                    <tr>
                        <th>Email</td>
                        <td>dac81048@gmail.com</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>

jquery 代码：

/** datahover hide on click outside **/
$(document).mouseup(function (e)
{
    var container = $(".datahover");

    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.css({"display": "none"});
        $('.facultysection').css({"background": "#fff"});
        if ($(window).width() > 767) {
            $('html, body').css({"overflow-x": "hidden", "overflow-y": "auto"});
        }
        else
        {
            $('html, body').css({"overflow-x": "hidden", "overflow-y": "auto"});
        }
    }
});

Answer 1

这个想法是在关闭按钮上使用点击事件的stopPropagation，例如：

$('.fa-times').click(function(event) {
  event.stopPropagation();
  $(".datahover").hide()
});

当您使用mouseup 并检查e.target 时，这里也不需要事件传播！

片段如下：

/** datahover hide on click outside **/
$(document).mouseup(function(e) {
  var container = $(".datahover");

  if (!container.is(e.target) && container.has(e.target).length === 0) {
    container.css({
      "display": "none"
    });
    $('.facultysection').css({
      "background": "#fff"
    });
    if ($(window).width() > 767) {
      $('html, body').css({
        "overflow-x": "hidden",
        "overflow-y": "auto"
      });
    } else {
      $('html, body').css({
        "overflow-x": "hidden",
        "overflow-y": "auto"
      });
    }
  }
});

$('.fa-times').click(function(event) {
  event.stopPropagation();
  $(".datahover").hide()
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="datahover">
  <a href="javascript:void(0);"><i class="fa fa-times" aria-hidden="true"></i></a>
  <div class="facultydata">
    <div class="leftside">
      <img src="deepak.jpg">
      <h3>Deepak Chaudhary</h3>
    </div>
    <div class="table-responsive">
      <table class="table">
        <tbody>
          <tr>
            <td>Designation</td>
            <td>ME</td>
          </tr>
          <tr>
            <td>Qualification</td>
            <td>CE</td>
          </tr>
          <tr>
            <td>Teaching Experience</td>
            <td>8 Years</td>
          </tr>
          <tr>
            <td>Industry Experience</td>
            <td>7 Years</td>
          </tr>
          <tr>
            <td>Department</td>
            <td>Computer</td>
          </tr>
          <tr>
            <td>Area</td>
            <td>All</td>
          </tr>
          <tr>
            <td>Email</td>
            <td>dac81048@gmail.com</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>