Question

我需要帮助来创建一个纯JavaScript事件侦听器，以捕获页面上的所有点击，获取链接文本/ URL，找到该链接的逻辑父DIV并将这些值连接在一起。请看以下示例代码：

<body>
    <div class="heading grid-12">
       <!-- Header and navigation links -->
        <a href="index.html">Summer Promotion</a>
    </div>
    <div class="responsiveGrid">
       <!-- page body -->
        <a href="/cart/sweaters/navy.html?promocode=123"><img alt="Navy Sweater" src="nsweater.jpg"/></a>
    </div>
    <div class="footer grid-12">
       <!-- Footer and bottom nav links -->
        <a href="javascript:void(0);" onClick="showOverlay">About Us</a>
    </div>
</body>

在上面的示例中，我想基于链接是否是这三个顶级DIV的子代来捕获链接在页面上逻辑上的位置。接下来，我要从锚/ JavaScript链接捕获链接文本，或从图像链接捕获替代文本。最后，我想获得链接的路径–如果锚链接，则不包括协议，域和查询字符串，如果href是'＃'或'javascript：void（0）;'，则转换为静态字符串“ Overlay”。使用上面的代码，我希望在单击任何链接时将最终的串联字符串发送到console.log：

'header|Summer Promotion|index.html'
'body|Navy Sweater|/cart/sweaters/navy.html'
'footer|About Us|Overlay'

提前感谢您的帮助。

纯JavaScript捕获链接点击数据

0 个答案: