ボタンまたは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>

Answer 2

はボタンにidを追加します。 id classの代わりに、うまく動作します。要素が

$("body").on('click', function() { 
     if ($("#social_button_area_post").is(':visible')) { 
     $("#social_button_area_post").hide() 
     } 
}) 

JSFIDDLE

Answer 3

$(document).mouseup(function(e) { 
 
    var button = $('button'); 
 

 
    if (!button.is(e.target)) { 
 
    button.hide(); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div style="height:250px; width:250px; 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> Post 
 
    </button> 
 

 
    </div> 
 

 
</div>