Javascript 如何在单击div及其内部时隐藏div，而在单击div内部的某些组件时不隐藏div？

我想在用户单击/轻触div时隐藏它，但是，如果用户单击/轻触div内的按钮/输入字段/图像等，我不想隐藏它。如何使用jquery实现这一点

下面是代码

在翡翠（哈巴狗）上做标记

jquery代码

这就是UI的外观

如果单击div中的任何位置，我希望能够隐藏

场合

div，但场合卡除外，例如生日卡、祝贺卡等

类似地，对于第二个屏幕截图，我希望当用户在div中单击除输入姓名的输入字段以外的任何位置时，能够隐藏收件人的姓名

---

在中的可单击元素上使用stopPropagation（）以防止单击事件冒泡。您需要指定事件并停止该事件上的传播

$（“.egreeting card”）。在（'click'，函数（事件）{event.stopPropagation（）；}）谢谢@Lapskaus，这很有效！
.occasion#occasion-header
      .heading
        span.number 1
        span#title Occasion
        span#chosen &nbsp- Birthay
        span#change Change
      #inside-text-occasion
        p#inside-title-occasion Select an occasion.
        #occasion-cards
          each card in spec.occasioncards
            +egreeting-card(card)
      br
      hr
      

    .recipient#recipient-header 
      .heading
        span.number 2
        span#title Name of Recipient
      #inside-text-recipient
        input#name(type="text")
      

   
    $("#occasion-header").on('click', function(){
      $("#inside-text-occasion").toggle();
    });

    $("#recipient-header").on('click', function(){
      $("#inside-text-recipient").toggle();
    });