Question

我正在尝试创建一个响应式单页Web应用程序。单击侧栏上的项目列表时，标记和地图应设置动画并显示信息窗口。 它似乎在普通浏览器布局上工作得很好但是当我将显示切换到较小的屏幕或移动设备时，点击功能不起作用。逻辑似乎是正确的。请帮助我了解我哪里出错了以及我应该做些什么。谢谢。

     <html>
       <head>
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
         <link href="style.css" rel="stylesheet">
         <script src="js/jquery-3.2.1.js"></script>
         <script src="js/knockout-3.4.0.js"></script>
        </head>

       <body>

        <div class="container-fluid">
          <div class="row">
            <div id="sidebar" class="col-xs-12 col-sm-5 col-md-3">
               <h1 class="center" > Chennai City Culture </h1>

                <div class="input-group col-xs-12 col-sm-6 col-md-12" >
                  <input id="text-search" type="text" class="form-control" placeholder="Enter here" data-bind="textInput: query">
                </div>

                <div class= "list-box" data-bind="foreach: filteredItems">
                    <a href="#" class="menu-item"data-bind="text: title, click: $parent.setLoc"></a>
                    <hr>
                </div>

             </div>

             <div class="col-xs-16 col-sm-6 col-md-8">
                 <div id="map">
                 </div>
             </div>
          </div>
        </div>

        <script src="js/app.js"></script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBf9eFadPLrD3QIQT7ygrYN8aRO5YuAUyE&callback=initMap" onerror="error()">
        </script>

       </body>
      </html>

JS：

        function appViewModel(){
      var self = this;
      this.query = ko.observable('');

      this.locationArray = ko.observableArray([]);
      locations.forEach(function(item){
        self.locationArray().push(item);
      });

      self.setLoc = function(clickedLoc) {
        var clickedData = clickedLoc.marker;
        google.maps.event.trigger(clickedData, 'click');
      };

      self.filteredItems = ko.computed(function(){
        var filter = self.query().toLowerCase();

        if(!filter){

          for (i = 0; i < locations.length; i++) {
              if (locations[i].marker) //checks to see that markers exist
              locations[i].marker.setVisible(true);
          }
          return self.locationArray();
        }
        return this.locationArray().filter(function (item){

          var passedFilter = item.title.toLowerCase().indexOf(filter) > -1;
          item.marker.setVisible(passedFilter);
          return passedFilter;
        });
      }, self);
    }
    ko.applyBindings(new appViewModel());

Answer 1

点击事件与触摸事件不同;尝试包括像touchpunch这样的库，可以为移动设备处理这些事件。我在构建一个KO应用程序时遇到了同样的问题，似乎解决了这个问题。

KO“点击”绑定不适用于移动设备响应

1 个答案: