单击绿色容器外部的任何位置以将其隐藏,脚本在移动Safari上不起作用

时间:2019-03-20 23:44:59

标签: javascript mobile-safari

我有两种隐藏绿色容器的方法,一种是使用第一种方法(使用切换方法),另一种是使用第二种方法,单击绿色容器之外的任何地方以将其隐藏,因此这两种方法都适用于

PC和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>-->

0 个答案:

没有答案