Нажмите где-нибудь за пределами зеленого контейнера, чтобы скрыть его скрипт не работает на мобильном Safari - PullRequest
Новая
       24

Нажмите где-нибудь за пределами зеленого контейнера, чтобы скрыть его скрипт не работает на мобильном Safari

0 голосов
/ 21 марта 2019

У меня есть два метода для скрытия зеленого контейнера: либо с помощью первого метода, который использует метод переключения, либо с помощью второго метода, щелкнув в любом месте за пределами зеленого контейнера, чтобы скрыть его, чтобы эти два метода работали на

все основные браузеры на ПК и на Android, но по какой-то причине второй метод не работает в мобильном Safari. Это значит, что ничего не происходит, так как я могу заставить второй метод работать на мобильном Safari?

И чтобы не путать мой пример кода. Этот красный div с золотом и серебром - триггерный переключатель. Нажмите на него, чтобы увидеть этот зеленый контейнер.

Вот мой код 

document.addEventListener('DOMContentLoaded', function() {

  var container = document.querySelector('.container');
  container.addEventListener('click', function(execute) {
    execute.stopPropagation();
  });

  document.addEventListener('click', closeContainer);
  
  document.getElementById('toggle').addEventListener('click', function(event){
    //this event will be called if the element with the 'toggle' ID or any of its children are clicked
    var containerVar = document.querySelector('.container');
    if(container.style.display !== 'block'){
      //show container
      container.style.display = 'block';
      //prevent the document click listener from being triggered
      event.stopPropagation();
     }
  });

  function closeContainer(obj) {
    var containerVar = document.querySelector('.container');
    containerVar.style.display = 'none';
  }

});
#toggle{
  background-color: red;
  display: inline-block;
  padding: 15px;
  
   -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}

#toggle #a{
  background-color: gold;
  margin: 0;
  height: 10px;
  width: 25px;
}

#toggle #b{
  background-color: silver;
  margin: 0;
  height: 10px;
  width: 25px;
}

  .container {
  background-color: green;
  height: 350px;
  width: 350px;
  margin-left: auto;
  margin-right: auto;
  display: none;
}
<style>

</style>

<script>
   
</script>

<div id='toggle'>
  <div id='a'></div>
  <div id='b'></div>
</div>

<div class='container'></div><!--</container>-->
...