SOURCE

$('body').on('click', function(e) {
   if(e.target.id === "clickMe") {
    $(popover).toggle();
  } else if (e.target.id === "popover" || $(e.target).parents('#popover').length > 0) {
    //return false
  } else {
    $(popover).hide()
  }
})

<div id="wrapper" class="wrapper">
  <button id="clickMe">
    点击我触发浮层事件
  </button>
  <div id="popover" class="popover">
    <input type="checkbox" />
    我是浮层
  </div>
</div>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

body {
  border: 1px solid red;
  height: 100vh;
}

.wrapper {
  position: relative;
  display: inline-block;
  border: 1px solid red;
}

.popover {
  border: 1px solid blue;
  width: 100px;
  height: 100px;
  position: absolute;
  left: 100%;
  top: 0;
  white-space: nowrap;
  podding: 10px;
  margin-left: 10px;
  background: greenyellow;
  display: none;
}

.popover::before {
  position: absolute;
  right: 100%;
  top: 0;
  border: 10px solid transparent;
  border-right-color: red;
  content: '';
}

.popover::after {
  position: absolute;
  content: '';
  right: 100%;
  top: 0;
  border: 10px solid transparent;
  border-right-color: #ffffff;
  content: '';
  margin-right: -1x;
}