javascript - Onclick på dokumentet och inte på ett specifikt element Alert

I min HTML här

$(document).click(function(){
    alert('Document Clicked');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button type='button'>CLICK [NO ALERT]</button>
    <button type='button'>ME[NO ALERT]</button>
</body>

I min kod här, hur kan jag förhindra att alerten visas om jag klickade på knapparna, men allt utom knapparna kan varnas.

Svar #1

Du kan lägga till en annan click-lyssnare på just den <button> och stoppa propagationen av händelsen:

$(document).click(function(){
  alert('Document Clicked');
})
$('.not-clickable').click(function(e) {
  e.stopPropagation();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button type='button'>CLICK [NO ALERT]</button>
    <button type='button' class="not-clickable">ME[NO ALERT]</button>
</body>

Ett annat alternativ är att kontrollera om elementet som klickades på är den specifika knappen:

$(document).click(function(e){
  if (e.target.classList.contains('not-clickable')) {
    return;
  }
  alert('Document Clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <button type='button'>CLICK [NO ALERT]</button>
    <button type='button' class="not-clickable">ME[NO ALERT]</button>
</body>

Svar #2

prova det

$("#SomeElementId").click(function(e) {
   //do something
   e.stopPropagation();
})