可点击 div 除了链接和按钮

Question

在我的网络应用程序中，我有一个 div 在单击时隐藏。然后出现一个新的 div（视频）。我的问题是我在第一个 div 中有一个投票按钮和一个 link，但是如果您单击它们，div 会隐藏并弹出视频而不是想要的功能。

如果他们单击按钮或 link，我怎样才能拥有它，它不会隐藏第一个 div 并显示视频？

<script type="text/javascript">
 $(function () {
  $('.videoDiv').hide();
  $('.firstDiv').on('click', function () {
   $('.videoDiv').show();
   $('.firstDiv').hide();
  });
 });
</script>

第一个Div:

<div class="panel-body firstDiv">
  <div class="col-xs-7 col-sm-8 col-md-7">
    <a class="btn btn-xs btn-info" rel="nofollow" data-method="put" href="/startups/1/follow">Follow</a>
  </div>
  <div class="col-xs-2 col-sm-2 col-md-2">
    <div class="btn-group-vertical pull-right" role="group">
      <a class="btn btn-sm btn-default pull-right upvote-btn" data-type="json" data-remote="true" rel="nofollow" data-method="put" href="/startups/1/upvote">
        <span class="glyphicon glyphicon-chevron-up"></span>
      </a>
    </div>
  </div>
</div>

视频Div：

<div class="panel-body videoDiv">
  <div class="video-js-box">
    <video id="" class=" video-js vjs-default-skin" controls preload="auto" width="auto" height="auto" poster="" data-setup="{}">

    </video>
  </div>
</div>

Answer 1

排除 link /upvote 按钮的事件，即，在 div 上应用点击功能并检查它不在 .btn 上，然后才执行您的语句。此外，您需要检查目标是否不是 .btn

的 child

 <script type="text/javascript">
 $(function () {
    $('.videoDiv').hide();
    $('.firstDiv').on('click', function (e) {
    if (!$(".btn").is(e.target) //not clicked on .btn
          && $(".btn").has(e.target).length === 0) //clicked thing is not child of .btn
      {
        $('.videoDiv').show();
        $('.firstDiv').hide();
      }
   });
});
</script>

Answer 2

如果 e.target 没有 btn class

，请尝试利用 .is()，调用 .show()，.hide()

$(function () {
  $(".videoDiv").hide();
  $(".firstDiv").on('click', function (e) {
   if (!$(e.target).is(".btn")) {
     $(".videoDiv").show();
     $(".firstDiv").hide();
   };
  });
});

可点击 div 除了链接和按钮

Clickable div except for links and buttons

html

javascript

jquery

show

hide