奈何两字拉成桥、不得不双击两次才能激活的JS方法
Aug 18, 2017, 艳阳高照
REQUEST
vv在做一个自带Google地图功能的Microsite,经纬度都研究明明白白的了,却被一个小问题困扰着,每次刷新页面之后点击链接都必须点击两次才能激活功能,而之后只需要点一次就可以,这个小哥用最近新学的AngularJs写的功能,抓耳挠腮不知道是AngularJs哪里出了问题
SOLUTION
在Google里边搜了一下“javascript have to click twice”,竟然有好多人遇到相同的问题,打开了几个stackoverflow,看了其中两个,发现说的都是同一个情况,《I have to click twice to activate function using jQuery》(https://stackoverflow.com/questions/28746323/i-have-to-click-twice-to-activate-function-using-jquery)在htm里边用onclick引用了JS里写的方法,问题就出现在JS里对应的function中重复绑定了click功能。看到这个答案,反观自己的HTML和JS代码
<h4>Where you'll find us</h4> <div class="clearfix"> <span class="search-store-icon">Region:</span> <input type="text" placeholder="" name="" class="search-store" ng-model="searchStores" ng-change="timeflash()"> <ul class="storelist" ng-show="searchStores.length > 0" ng-focus="hasFocus=true"> <li ng-repeat="x in stores | filter:searchStores | orderBy:'region'" ng-mouseover="mouseOverEvent($index)" ng-click="enterKeyEvent($event)" data-storeidx="{{ x.storeidx }}" data-omni-type="microsite" data-omni="{{ x.omn }}">{{ x.name }}</li> </ul> </div>
$scope.enterKeyEvent = function (event) { var listArry = $('.storelist>li'); listArry.click(function() { var selectListName = $(event.target).text(); var selectListIdx = $(event.target).attr('data-storeidx'); var lat1 = $scope.stores[selectListIdx].lat; var lng1 = $scope.stores[selectListIdx].lng; var selectStoreMap = $scope.stores[selectListIdx].map; $('.storelist').hide(); $('.search-store').val(selectListName); storeName.text($scope.stores[selectListIdx].name); storeGegion.text($scope.stores[selectListIdx].region); storeLocation.text($scope.stores[selectListIdx].location); storeAddr.text($scope.stores[selectListIdx].address); storePhone.text($scope.stores[selectListIdx].tel); if(selectStoreMap == null || selectStoreMap == undefined || selectStoreMap == ''){ $('#store-map').hide(); }else{ $('#store-map').show(); storeMap.attr("src",selectStoreMap); } getNearbyStore(lat1,lng1); }); };
在Html中“ng-click="enterKeyEvent($event)"”的ng-click就相当于onclick,在JS中定位了listArry,并对listArry绑定了cilck方法,和stackoverflow中提到的问题是同一类,于是删掉不必要的listArry定位和click方法,重新修改JS如下:
$scope.enterKeyEvent = function (event) { var selectListName = $(event.target).text(); var selectListIdx = $(event.target).attr('data-storeidx'); var lat1 = $scope.stores[selectListIdx].lat; var lng1 = $scope.stores[selectListIdx].lng; var selectStoreMap = $scope.stores[selectListIdx].map; $('.storelist').hide(); $('.search-store').val(selectListName); storeName.text($scope.stores[selectListIdx].name); storeGegion.text($scope.stores[selectListIdx].region); storeLocation.text($scope.stores[selectListIdx].location); storeAddr.text($scope.stores[selectListIdx].address); storePhone.text($scope.stores[selectListIdx].tel); if(selectStoreMap == null || selectStoreMap == undefined || selectStoreMap == ''){ $('#store-map').hide(); }else{ $('#store-map').show(); storeMap.attr("src",selectStoreMap); } getNearbyStore(lat1,lng1); };
困扰vv昨晚一晚的问题,我们半个小时就解决了,哈,因为今天中午他请客吃烤鱼了!