Javascript "；点击"；绑定赢得'；不适用于移动设备_Javascript_Knockout.js

Javascript "；点击"；绑定赢得'；不适用于移动设备

javascript knockout.js

Javascript "；点击"；绑定赢得'；不适用于移动设备,javascript,knockout.js,Javascript,Knockout.js,我正在尝试创建一个响应性强的单页web应用程序。单击侧栏上的项目列表时，您将看到标记和地图上的标记应设置动画并显示信息窗口在正常的浏览器布局上，它似乎工作得很好，但当我将显示切换到较小的屏幕或在移动设备上时，单击功能不起作用。逻辑似乎是正确的。请帮助我了解我哪里出了问题，我应该怎么做。多谢各位 <html> <head> <meta charset="UTF-8"> <meta name="vi

我正在尝试创建一个响应性强的单页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:

函数appViewModel（）{
var self=这个；
this.query=ko.可观察（“”）；
this.locationArray=ko.observearray（[]）；
位置。forEach（功能（项目）{
self.locationArray（）.push（项目）；
});
self.setLoc=功能（单击锁定）{
var clickedData=clickedLoc.marker；
google.maps.event.trigger（点击数据，'click'）；
};
self.filteredItems=ko.computed（函数（）{
var filter=self.query（）.toLowerCase（）；
如果（！过滤器）{
对于（i=0；i-1；
item.marker.setVisible（passedFilter）；
回传滤波器；
});
}，自我）；
}
应用绑定（新的appViewModel（））；

点击事件与触摸事件不同；尝试包括一个像touchpunch这样的库，它将为您处理移动设备上的这些事件。我在开发一款KO应用程序时遇到了同样的问题，这似乎解决了问题。

点击事件与触摸事件不同；尝试包括一个像touchpunch这样的库，它将为您处理移动设备上的这些事件。我正在构建的KO应用程序也有同样的问题，这似乎解决了问题。

点击事件对于较小的屏幕也不起作用。请帮助我了解出了什么问题。谢谢您您的脚本文件正在抛出错误。。。未定义位置（第6行）。另外，您的initMap回调似乎不存在。。。你确定你发布了正确的JS文件吗？我只更新了.computed函数，认为代码中一定有逻辑错误。这里是指向我的github的链接，其中包含更新的更改。单击事件对于较小的屏幕也不起作用。请帮助我了解出了什么问题。谢谢您您的脚本文件正在抛出错误。。。未定义位置（第6行）。另外，您的initMap回调似乎不存在。。。你确定你发布了正确的JS文件吗？我只更新了.computed函数，认为代码中一定有逻辑错误。这里是指向我的github的链接，其中包含更新的更改。

        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());