Question

我可以使用javascript计算点击链接吗？

Answer 1

您可以计算单个请求中的点击次数（例如，在加载页面后点击按钮的次数）。您无法计算请求之间的点击次数（在您加载其他页面或重新加载当前页面之后）。

示例：

<script type="text/javascript">var clicks = 0;</script>
<input value="Click" type="button" onclick="clicks++">

<强>更新：

您还可以使用以下内容（使用jQuery）按照其他人的建议使用Cookie来保留它：

onclick="$.cookie('clicks', $.cookie('clicks') + 1);"

Answer 2

当然，将onclick事件处理函数添加到<a>标记中，该标记检索，递增和存储计数器变量。您可以在隐藏字段中检索和存储它。但是，一旦离开页面，您将丢失信息。

Answer 3

您可以使用此脚本计算网页链接的所有点击次数：

// 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：我不担心锚链接，因为他们的跟踪可能有一些自己的兴趣。如果这样做，只需测试a.href是否在for循环中包含location.href +'＃'。

Answer 4

您应该直接从Web服务器日志或解析?id=1234的代码加载实际内容来计算服务器端的这些请求。

不要将来自页面作者的请求计入您提供的ID，假设您有一些方法可以告诉（登录，cookie，IP地址） - 这部分将更容易从您的代码而不是服务器记录。

Answer 5

<script type="text/javascript">

var clicks = 0;
function linkClick() {
    document.getElementById('clicked').value = ++clicks;
}

document.write('<a href="#" onclick="linkClick()">Click Me!</a>');

您点击了链接时间。

Answer 6

你可以使用这个：

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>

Answer 7

据推测，您正试图查看用户点击的页面上有多少链接，以便查看他们访问过哪些链接。这是一个不可靠的策略，因为用户可以通过多种不同方式访问链接而无需单击它们（上下文菜单，拖动到新选项卡，复制链接位置等）。

如果您想知道他们在当前页面中点击了多少链接，答案是零，因为如果他们点击链接，他们应该转到另一个页面。如果您使用侦听器来阻止导航，那么同一个侦听器也可以计算点击次数。

Answer 8

这是一个简单的点击计数器，点击次数限制因素为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>

Answer 9

我用本地存储创建了一个点击计数器，因此它可以存储点击计数。

<html>
<body>
    <a href="#" onclick="clickCounter()" type="button">Click Counter</a>
    <a href="#" onclick="resetCounter()" type="button">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>

如何使用javascript计算点击次数？

9 个答案: