奈何两字拉成桥、不得不双击两次才能激活的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>

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昨晚一晚的问题，我们半个小时就解决了，哈，因为今天中午他请客吃烤鱼了！