由来自不同脚本函数的相同单击触发的冲突事件

Question

我绝对是一个在网页设计中被扔在深端的大内行。在过去的两个星期里，我设法把一个自定义的谷歌地图与标记和信息窗口弹出时，点击一个链接外的地图。

——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的脚本。这也有效，但标记+信息窗口弹出失败发生。我需要的是在滚动结束后弹出标记+信息窗口。

——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的数据属性替换它们。

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