来自不同脚本功能的相同单击触发的冲突事件

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