追踪 javascript 函数设置点击事件的原因

Question

我正在尝试修改主题的功能，但运行遇到了麻烦。

我需要查明是什么 javascript 函数设置了一个 'add to cart' 按钮点击事件，它使用了 ajax.

这是我尝试诊断问题的页面...

http://www.healthjunkies.com.au/benefits-of-whey-protein/

在边栏上 - 当您点击一个紫色的“添加到购物车”按钮时，它会在边栏中创建一条看起来一团糟的成功消息。这是因为我从主题的另一部分复制了一些功能，并将其放入侧边栏小部件中。

现在我需要隔离设置此调用的函数。

我尝试使用 Chrome 开发人员工具，使用断点，它似乎跟踪了 jQuery 和一些点击跟踪器之间的调用，我猜是一些分析插件。

如何首先隔离设置事件的函数，以便更改结果。

Answer 1

有两种方法：

1.) 使用 Chrome 的 搜索面板 （在源下）搜索正在注册监听器的元素（参见答案 here 指南）。

2.) "Elements".

下的 "Event Listeners" 选项卡

Answer 2

查看页面源代码，第 923-930 行：

<script type="text/javascript">
jQuery(function($) {

    $( '.add_to_cart_button:not(.product_type_variable, .product_type_grouped)' ).click( function() {
        ga('send', 'event', 'Products', 'Add to Cart', ($(this).data('product_sku')) ? ('SKU: ' + $(this).data('product_sku')) : ('#' + $(this).data('product_id')));
    });

});
</script>

Answer 3

最近的解决方案在 Chrome > 开发者工具 > 来源 > 事件侦听器 > 鼠标 > 点击

然后浏览事件

追踪 javascript 函数设置点击事件的原因

Track down what javascript function sets up a click event

javascript

google-chrome-devtools