A HREF 中的 JavaScript 使 jQuery 函数无法工作

Posted 2023-04-13

【中文标题】A HREF 中的 JavaScript 使 jQuery 函数无法工作

【英文标题】：JavaScript inside the A HREF keeps jQuery function from working

【发布时间】：2015-07-15 21:17:51

【问题描述】：

我正在使用 WordPress 插件来显示位置列表和这些位置的地图。

我创建了以下函数，以便在单击链接时链接将滚动到地图。

 jQuery(document).ready(function($) 
    $(".wpgmp_location_title h3 a").click(function() 
        $('html, body').animate(
            scrollTop: $("#map-selected").offset().top
        , 2000);
    );
);

但是，插件会自动将以下内容添加到每个链接：

href="javascript:open_current_location(marker2259map2)">

此链接会导致地图标记打开，但它似乎阻止了 jQuery 函数将页面滚动到页面顶部。

任何想法如何克服这个问题？

【问题讨论】：

哇，这是一个可怕的图书馆。

您对 HTML 有控制权吗？您可以从 HTML 中删除该功能并在滚动功能结束时调用它，以便当用户单击时，您可以滚动到正确的地图并打开当前选择的位置...

您可以遍历所有链接，将 ref 复制到变量中，剥离“javascript:”部分，删除 href，然后在 click 事件中评估变量（除非您不希望打开标记）

评估变量？ :(

你试过javascript函数preventDefault();??

【参考方案1】：

您需要取消点击处理程序中的默认事件：

jQuery(document).ready(function($) 
    $(".wpgmp_location_title h3 a").click(function(event) 
        event.preventDefault();
        $('html, body').animate(
            scrollTop: $("#map-selected").offset().top
        , 2000);
    );
); 

Fiddle

【讨论】：

不幸的是，这似乎不适用于该功能。点击链接时，网站仍然不滚动。

事实上，preventDefault 似乎让 scrollTop 在任何情况下都无法正常工作。

【参考方案2】：

一种方法可能是覆盖 open_current_location() 函数。 看看this example，你也可以执行滚动然后原来的open_current_location()行为