单击外部时隐藏元素

Question

我创建了一个＆＃34;小时选择器＆＃34;当用户点击输入时，会出现选择器。 现在我想在用户点击它之外时隐藏它。但它更复杂。我看到了其他线程，我复制了部分代码，但它并不完美：

当我点击选择器时它可以工作，但是当我点击几小时或几分钟时没有。 这是代码（不起作用的代码部分位于js文件的末尾。）：

＆＃13;

＆＃13;

(function() {
  var hourPicker = document.querySelectorAll(".hourPicker");

  for (var i = 0; i < hourPicker.length; i++) {
    var hour_list = hourPicker[i].querySelector(".hour");
    var minute_list = hourPicker[i].querySelector(".minute");

    minute_list.addEventListener('click', function(e) {

      setMinute(this.parentNode.parentNode.parentNode, this.parentNode.parentNode.parentNode.querySelector('.minute').innerHTML);
    });

    hour_list.addEventListener('click', function(e) {
      setHour(this.parentNode.parentNode.parentNode, this.parentNode.parentNode.parentNode.querySelector('.hour').innerHTML);
    });

    setHour(hourPicker[i]);

  }

  function setMinute(hourPicker, minuteselected) {

    var circle = hourPicker.querySelector(".circle");
    var current_minute = minuteselected || (new Date).getMinutes();
    var txt = "";
    var angle = 360 / 60;
    var s = 90;
    var minutes = ["30", "35", "40", "45", "50", "55", "00", "05", "10", "15", "20", "25"];
    var minutesState = 0;
    circle.innerHTML = '<svg class="svg" width="240" height="240"></svg>';
    var minute = 30;
    for (var i2 = 0; i2 < 60; i2++) {

      if ((i2 % 5) == 0) {
        txt += '<div data-minute="' + minute + '" class="item show" style=" transform: rotate(' + s + 'deg) translate(8em) rotate(-' + s + 'deg);">' + minutes[minutesState] + '</div>';
        minutesState++;
      } else {
        txt += '<div data-minute="' + minute + '" class="item empty" style=" transform: rotate(' + s + 'deg) translate(8em) rotate(-' + s + 'deg);"></div>';
      }
      minute++;
      if (minute >= 60) minute = 0;
      s += angle
    }


    circle.innerHTML += txt; //insertion dans l'html


    // console.log(parseInt( current_minute));
    var data = circle.querySelector('[data-minute~="' + parseInt(current_minute) + '"]'); //preselection
    setDisplay(data, circle);
    if (current_minute < 10) current_minute = "0" + parseInt(current_minute);
    hourPicker.querySelector('.minute').innerHTML = current_minute;


    var item = circle.querySelectorAll(".item");


    for (var ii = 0; ii < item.length; ii++) {
      item[ii].addEventListener('mouseover', function(e) {
        var hourPicker = this.parentNode.parentNode.parentNode;
        var minute = hourPicker.querySelector(".minute");
        minute.innerHTML = (this.dataset.minute < 10) ? ('0' + this.dataset.minute) : this.dataset.minute;


        // var svg  = this.parentNode.parentNode.querySelector(".svg");
        // console.log(svg);
        hourPicker.previousSibling.previousSibling.value = hourPicker.querySelector('.hour').innerHTML + ":" + hourPicker.querySelector('.minute').innerHTML;
        hourPicker.previousSibling.previousSibling.dataset.hour = hourPicker.querySelector('.hour').innerHTML + ":" + hourPicker.querySelector('.minute').innerHTML;
        setDisplay(this, circle)

      });
      item[ii].addEventListener('click', function(e) {
        var hourPicker = this.parentNode.parentNode.parentNode;
        var input = this.parentNode.parentNode.parentNode.previousSibling.previousSibling;
        setDisplayClock(input);
        setHour(hourPicker);
        //setMinute(hourPicker);

      });
    }
  }

  function setHour(hourPicker, hourselected) {
    var circle = hourPicker.querySelector(".circle");
    var current_hour = hourselected || (new Date()).getHours();
    hourPicker.querySelector(".hour").innerHTML = current_hour;
    var txt = "";
    var angle = 360 / 12;
    var s = 90;
    var hoursM = ["6", "7", "8", "9", "10", "11", "12", "1", "2", "3", "4", "5"];
    var hoursA = ["18", "19", "20", "21", "22", "23", "0", "13", "14", "15", "16", "17"];
    circle.innerHTML = '<svg class="svg" width="240" height="240"></svg>';
    for (var i2 = 0; i2 < 12; i2++) {
      txt += '<div data-hour="' + hoursM[i2] + '" class="item" style=" transform: rotate(' + s + 'deg) translate(8em) rotate(-' + s + 'deg);">' + hoursM[i2] + '</div>';
      txt += '<div data-hour="' + hoursA[i2] + '" class="item" style=" transform: rotate(' + s + 'deg) translate(5em) rotate(-' + s + 'deg);">' + hoursA[i2] + '</div>';
      s += angle
    }

    circle.innerHTML += txt; //insertion dans l'html

    var data = circle.querySelector('[data-hour~="' + current_hour + '"]'); //preselection
    setDisplay(data, circle);

    var item = circle.querySelectorAll(".item");


    for (var ii = 0; ii < item.length; ii++) {
      item[ii].addEventListener('mouseover', function(e) {
        var hourPicker = this.parentNode.parentNode.parentNode;
        var hour = hourPicker.querySelector(".hour");
        hour.innerHTML = (this.dataset.hour < 10) ? ('0' + this.dataset.hour) : this.dataset.hour;

        // var svg  = this.parentNode.parentNode.querySelector(".svg");
        // console.log(svg);
        hourPicker.previousSibling.previousSibling.value = hourPicker.querySelector('.hour').innerHTML + ":" + hourPicker.querySelector('.minute').innerHTML;
        setDisplay(this, circle);


      });
      item[ii].addEventListener('click', function(e) {
        var hourPicker = this.parentNode.parentNode.parentNode;
        setMinute(hourPicker);

      });
    }


  }

  function setDisplay(cell, circle) {
    var y2 = cell.getBoundingClientRect().top; //cordonne de l'item
    var x2 = cell.getBoundingClientRect().left;

    var w2 = cell.getBoundingClientRect().width; //taille item
    var h2 = cell.getBoundingClientRect().height;

    var circlePos = circle.getBoundingClientRect(); //pour avoir les coordonnée du cercle


    var x1 = circle.offsetWidth / 2; //coordonnées du centre
    var y1 = circle.offsetHeight / 2;
    if (cell.parentNode.querySelector(".check") !== null)
      cell.parentNode.querySelector(".check").classList.remove("check");

    cell.classList.add("check");
    cell.parentNode.querySelector(".svg").innerHTML = '<line x1="' + x1 + '" y1="' + y1 + '" x2="' + ((x2 - circlePos.left) + w2 / 2) + '" y2="' + ((y2 - circlePos.top) + h2 / 2) + '" stroke="#009688"/>';


  }

})();

function setDisplayClock(obj) {
  if (obj.dataset.ishide == "true") {
    // document.querySelector(".event_cache_site").style.display = "none";
    obj.dataset.ishide = "false";
    obj.nextSibling.nextSibling.classList.add("hourPicker_hide");
    obj.nextSibling.nextSibling.classList.remove("hourPicker_show");
  } else {
    // document.querySelector(".event_cache_site").style.display = "block";
    obj.dataset.ishide = "true";
    obj.nextSibling.nextSibling.classList.add("hourPicker_show");
    obj.nextSibling.nextSibling.classList.remove("hourPicker_hide");

  }

}
////////////////////////////////////////////////////////////////////////
////////////////////////////////////
////////////////////////////////////
////part of code who not works
////////////////////////////////////////////////////////////////////////
(function() {
  window.addEventListener('click', function(e) { // evenement click sur toute la page

    var hourPicker = document.querySelectorAll(".hourPicker"); //on prd l'element qu on veut pas toucher
    var h_input = document.querySelectorAll(".hour_input");



    for (var i2 = 0; i2 < hourPicker.length; i2++) { //on check pour les horloges
      var horloge = hourPicker[i2];

      if (!horloge.contains(e.target) && !h_input[i2].contains(e.target)) { //on ragarde si element clické est contenue dans l'elémeent a pas toucher
        h_input[i2].dataset.ishide = "false";
        horloge.classList.add("hourPicker_hide");
        horloge.classList.remove("hourPicker_show");



        //console.log(item);
      }
    }

  });

})();

＆＃13;

.hourPicker {
  font-size: 1.5rem;
  position: absolute;
  display: inline-block;
  background: #fff;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.hourPicker_hide {
  display: none;
  -moz-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
}

.hourPicker_show {
  display: inline-block;
  -moz-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
}

.hourPicker .head {
  text-align: right;
  padding: .5em .5em;
  background: #009688;
  font-size: 2em;
  color: white;
}

.hourPicker .head p {
  padding: 0em;
  margin: 0em;
  display: inline-block;
}

.hourPicker .body {
  position: relative;
  margin: 2em 1em;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hourPicker .circle {
  margin: 0;
  padding: 0;
  position: relative;
  background-color: #EEEEEE;
  height: 20em;
  border-radius: 50%;
  width: 20em;
}

.hourPicker .item {
  width: 1.5em;
  height: 1.5em;
  text-align: center;
  font-size: 1.1em;
  position: absolute;
  top: 45%;
  left: 45%;
  line-height: 1.5em;
}

.hourPicker .item:hover {
  border-radius: 50%;
  background: #009688;
  color: white;
}

.hourPicker .check {
  border-radius: 50%;
  background: #009688;
  color: white;
}

.hourPicker .empty {
  z-index: 0;
}

.hourPicker .show {
  z-index: 1;
}

.hourPicker .center_circle {
  position: absolute;
  background: #009688;
  width: .5em;
  height: .5em;
  border-radius: 50%;
}

.hourPicker .arrow_circle {
  position: absolute;
  width: 5.5em;
  background: #009688;
  height: 0.1em;
  right: 2em;
}

.hourPicker .bottom {
  padding: 0.5em 1em;
  float: right;
}

.hourPicker .bottom button {
  color: #009688;
  background: none;
  border: none;
}

＆＃13;

<input name="hour" class="hour_input" readonly="readonly" data-ishide="false" data-hour="" type="text" value="heure" onclick="setDisplayClock(this)" />
<div class="hourPicker hourPicker_hide" id="heureee">
  <div class="head">
    <div class="time">
      <p class="hour"></p>:
      <p class="minute">00</p>
    </div>
  </div>
  <div class="body">
    <div class="circle">
      <svg class="svg" width="240" height="240"></svg>
    </div>
    <div class="center_circle"></div>
    <!--<div class="arrow_circle"></div>-->


  </div>
  <div class="bottom"><button disabled>CANCEL</button> <button disabled>OK</button></div>
</div>

＆＃13;

＆＃13;

＆＃13; How do I detect a click outside an element? 这段代码对我不起作用，我想在没有Jquery的情况下这样做 非常感谢 托马斯