我可以用 javascript 计算链接的点击次数吗？
【问题讨论】：
onClick 被触发的次数？
标签： javascript
您可以计算单个请求中的点击次数（例如，在页面加载后单击按钮的次数）。您无法计算跨请求的点击次数（在您加载另一个页面或重新加载当前页面之后）。
例子：
<script type="text/javascript">var clicks = 0;</script>
<input value="Click" type="button" onclick="clicks++">
更新：
您还可以使用以下方法（使用 jQuery）使用其他人推荐的 cookie 来持久化它：
onclick="$.cookie('clicks', $.cookie('clicks') + 1);"
【讨论】：
当然，将 onclick 事件处理函数添加到 <a> 标记，用于检索、递增和存储计数器变量。您可以检索并将其存储在隐藏字段中。但是，一旦您离开该页面，您将丢失信息。
【讨论】：
您应该在服务器端计算这些请求，或者直接来自 Web 服务器日志，或者来自解析 ?id=1234 以加载实际内容的代码。
不要计算来自您提供 ID 的页面作者的请求，假设您有某种方式可以告诉（登录名、cookie、IP 地址）——这部分从您的代码中会更容易，而不是服务器日志。
【讨论】：
您可以使用此脚本计算页面链接的所有点击次数：
// This variable contains the number of clicks corresponding to the linked URLs
var clickCount = {}
// List of all a tags
, aList = document.getElementsByTagName('a')
// Function called every time a link is clicked on
, clickCounter = function()
{
clickCount[this.href] = clickCount[this.href] ? clickCount[this.href]+1 : 1;
}
;
// The event is attached to every link having a "href" attribute
for (var i=0 ; i<aList.length, a=aList[i] ; i++)
{
if (this.href)
{
a.onclick = clickCounter;
}
}
// This example uses jQuery to send the data to a PHP script
// A POST request is sent just before the window is closed
onbeforeunload = function()
{
$.post('/tracking.php', clickCount);
}
PS：我不担心锚链接，因为它们的跟踪可能有其自身的一些兴趣。如果这样做，只需在 for 循环中测试 a.href 是否包含 location.href+'#'。
【讨论】：
document.links，因为锚点也是 A 元素，但不是链接。
<script type="text/javascript">
var clicks = 0;
function linkClick() {
document.getElementById('clicked').value = ++clicks;
}
document.write('<a href="#" onclick="linkClick()">Click Me!</a>');
您点击了链接次数。
【讨论】：
你可以用这个：
const btn = document.querySelector('.btn');
btn.onclick = Counter;
const clicks = document.querySelector('.clicks');
clicks.id = document.querySelector('clicks');
var a = 0;
function Counter() {
a += 1;
clicks.innerHTML = a;
}<button class="btn">Click</button>
<p>Clicks: <a class="clicks">0</a></p>如果你想添加重置按钮，你可以使用这个：
const click = document.querySelector('.click');
click.onclick = Counter;
const reset = document.querySelector('.reset');
reset.onclick = resetCounter;
const clicks = document.querySelector('.clicks');
clicks.id = document.querySelector('clicks');
var a = 0;
function Counter() {
a += 1;
clicks.innerHTML = a;
}
function resetCounter() {
a = 0;
clicks.innerHTML = a;
}<button class="click">Click</button>
<p>Clicks: <a class="clicks">0</a></p>
<button class="reset">Reset</button>【讨论】：
您可能正试图查看用户点击了页面上的多少链接，以便查看他们访问了哪些链接。这是一个不可靠的策略，因为用户可以通过多种不同方式访问链接而无需单击它们（上下文菜单、拖动到新选项卡、复制链接位置等）。
如果您想知道他们在当前页面中点击了多少链接，答案是零，因为如果他们点击一个链接，他们应该转到另一个页面。如果您使用监听器来阻止导航，那么同一个监听器也可以计算点击次数。
【讨论】：
这是一个简单的点击计数器，点击之间的限制因子为200ms。在this example 中，我已经做到了，所以在随后的 3 次点击之后会发生一些事情：
var onClick = (function(){
var count = 0, timer;
return function(){
count++;
clearTimeout(timer);
timer = setTimeout(function(){count = 0}, 200);
// do whatever after 3 clicks
if( count > 2 )
document.body.classList.toggle('mode');
}
})();
document.body.addEventListener("click", onClick);html, body{ height:100%; }
body{
font:20px Arial;
text-align:center;
padding:20px;
background:#EFDCE8;
transition:.3s;
-moz-user-select:none;
-webkit-user-select:none;
}
body.mode{ background:lightgreen; }<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
Click anwhere 3 times
</body>
</html>【讨论】：
我创建了一个带有本地存储的点击计数器，因此它可以存储点击计数。
<html>
<body>
<a href="#" onclick="clickCounter()">Click Counter</a>
<a href="#" onclick="resetCounter()">Reset Counter</a>
<br>
<p id="result"></p>
<script>
function clickCounter() {
var count = localStorage.clickcount = Number(localStorage.clickcount)+1;
if (isNaN(count) === true) {
count = localStorage.clickcount = 1;
document.getElementById("result").innerHTML = count;
} else {
document.getElementById("result").innerHTML = count;
}
}
function resetCounter() {
var reset = localStorage.clickcount = 0;
document.getElementById("result").innerHTML = reset;
}
</script>
</body>
</html>
【讨论】：