javascript - 在按钮或 div 外部单击时隐藏按钮

Question

我想在按钮外点击时隐藏一个按钮。

HTML :

<div style="background:#FF0000;">

  <div style="vertical-align:middle; text-align:center; padding:50px;">

    <button name="Submit" type="submit" class="social_button_area_post" title=" Share Your Flow ">
      <i class="fa fa-share-alt-square"></i> Video
    </button>

    <button name="Submit" type="submit" class="social_button_area_post" title=" Share Your Flow " id="hidethisbutton">
      <i class="fa fa-share-alt-square"></i> Post
    </button>

    <button name="Submit" type="submit" class="social_button_area_post" title=" Share Your Flow ">
      <i class="fa fa-share-alt-square"></i> Photo
    </button>

  </div>

</div>

Answer 1

$(document).ready(function() {
  $(document).click(function() {
    $("#hidethisbutton").hide();
  })

  $("#hidethisbutton").click(function() {
    return false;
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="background:#FF0000;">

  <div style="vertical-align:middle; text-align:center; padding:50px;">

    <button name="Submit" type="submit" class="social_button_area_post" title=" Share Your Flow ">
      <i class="fa fa-share-alt-square"></i> Video
    </button>

    <button name="Submit" type="submit" class="social_button_area_post" title=" Share Your Flow " id="hidethisbutton">
      <i class="fa fa-share-alt-square"></i> Post
    </button>

    <button name="Submit" type="submit" class="social_button_area_post" title=" Share Your Flow ">
      <i class="fa fa-share-alt-square"></i> Photo
    </button>

  </div>

</div>