奈何兩字拉成橋、不得不雙擊兩次才能啟用的JS方法

標籤：hone   angular   open   site   flash   點擊   inpu   tor   刪掉   

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>

Html Code

$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);    });};

JavaScript Incorrect Code

在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);};

JavaScript Correct Code

困擾vv昨晚一晚的問題，我們半個小時就解決了，哈，因為今天中午他請客吃烤魚了！

奈何兩字拉成橋、不得不雙擊兩次才能啟用的JS方法