简体   繁体   中英

Clickable div except for links and buttons

On my web app, I have a div that hides when clicked. Then a new div (video) appears. My problem is that I have an upvote button and a link in the first div, but if you click those, the div hides and pops up the video instead of the wanted functionality.

How can I have it so if they click the button or the link, it doesn't hide the first div and show the video?

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

First 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>

Video 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>

Exclude events for link /upvote button that is, apply click function on div and check it is not on .btn only then execute your statements. Also, you need to check if target is not child of .btn

 <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>

Try utilizing .is() , calling .show() , .hide() if e.target does not have btn class

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM