來自不同腳本功能的相同單擊觸發的沖突事件

Question

我絕對是網頁設計中的重要人物。 在過去的兩個星期中，我設法整理了一張自定義的Google地圖，並在單擊地圖外部的鏈接時彈出了標記和信息窗口。

----- map.js

function triggerClick(id) {
  google.maps.event.trigger(gmarkers[id],"click")
};

function createMarker(latlng, html, id) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map,marker);
    });
    gmarkers[id] = marker;
}

現在，我嘗試將其與另一個腳本結合起來，該腳本實現動畫視差滾動，從而使用另一個使用jquery的腳本將頁面從單擊的鏈接移動到地圖。 這也可以，但是marker + infowindow彈出窗口不會發生。 我需要的是在滾動結束后彈出的marker + infowindow。

----- scripts.js

jQuery(document).ready(function ($) {

    $(window).stellar();

    var chartLink = $('.chart').find('li');
    slide = $('.slide');
    htmlbody = $('html,body');

    function goToByScroll(dataslide) {
        htmlbody.animate({
            scrollTop: $('.slide[data-slide="' + dataslide + '"]').offset().top
        }, 2000, 'easeInOutQuint');
    }
    chartLink.click(function (e) {
        e.preventDefault();
        dataslide = $(this).attr('data-slide');
        goToByScroll(dataslide);
    });

});

我嘗試定位的HTML鏈接是：

----- index.html

<ul class="chart">
<li>
  <a data-slide="3" href="javascript:triggerClick('bond')">Bond Street</a></li>
  <li><a data-slide="3" href="javascript:triggerClick('barbican')">Barbican</a>
</li>
</ul>

據我了解，同一個點擊事件會同時觸發兩個不同的事件，一個來自triggerClick函數，另一個來自goToByScroll函數。

我已經尋找解決方案好幾天了，嘗試了很多事情，特別是callback（），但是處理單獨的腳本超出了我的頭腦。 有人可以幫我嗎。

謝謝！

Answer 1

使用回調可以使您處於正確的軌道。 滾動完成后，您需要觸發標記單擊。 如果您面臨的問題是您的腳本正在相互隱藏函數，請創建一個全局應用程序對象並將所需的函數放在其中。 您還需要從href屬性中刪除javascript，並將其替換為具有相應ID的另一個data屬性。

<ul class="chart">
  <li><a data-slide="3" data-id="bond">Bond Street</a></li>
  <li><a data-slide="3" data-id="barbican">Barbican</a></li>
</ul>

創建一個應用程序范圍的對象來存儲功能

window.myapp = {};

將triggerClick函數添加到此對象

myapp.triggerClick = function(){...};

現在，通過使用回調在動畫完成后調用此函數

function goToByScroll(data) {
    htmlbody.animate({
        scrollTop: $('.slide[data-slide="' + data.slide + '"]').offset().top
    }, 2000, 'easeInOutQuint', function() {
        myapp.triggerClick(data.id);
    });
}
chartLink.click(function (e) {
    e.preventDefault();
    goToByScroll($(this.data()); // use jquery to grab all the data attributes
});