发表新帖
发表新帖

How to count clicks with javascript?

后端 未结
关注
8 2205
予麋鹿
予麋鹿 2020-12-01 22:14

Can I count clicks on links with javascript?

相关标签:
8条回答
  • 误落风尘
    2020-12-01 22:54

    You can count all clicks on a page's links with this script:

    // 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: I don't worry about anchor links, since their tracking may have some interest of its own. If you do, just test if a.href contains location.href+'#' in the for loop.

    0 讨论(0)
  • 借酒劲吻你
    2020-12-01 22:59

    You should count these requests server-side, either straight from the web server logs or from the code that resolves the ?id=1234 to load the actual content.

    Don't count requests coming from the page author that you gave the ID to, assuming you have some way to tell (a login, a cookie, an IP address) -- this part would be easier from your code rather than the server logs.

    0 讨论(0)
  • 不思量自难忘°
    2020-12-01 23:00

    Here's a simple click counter with a limiting factor of 200ms between clicks. In this example I've made it so after 3 subsequent clicks something will happen:

    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>

    0 讨论(0)
  • 北荒
    2020-12-01 23:05 
    <script type="text/javascript">

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

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

    You have clicked the link times.

    0 讨论(0)
  • 被撕碎了的回忆
    2020-12-01 23:06

    Presumably you are trying to see how many links on a page a user has clicked on in order to see which ones they've visited. That is an unreliable strategy since users can visit links many different ways without clicking on them (context menu, drag to new tab, copy link location, etc.).

    If you want to know how many links they've clicked on in the current page, the answer is zero since if they click on a link they should go to another page. If you are using a listener to prevent navigation, then the same listener can also count clicks.

    0 讨论(0)
  • 小鲜肉
    2020-12-01 23:07

    You can count clicks within a single request (for example, how many times a button was clicked after the page loaded). You cannot count clicks across requests (after you load another page or reload the current page).

    Example: 

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

    UPDATE:

    You can also use the following (using jQuery) to persist it using cookies as recommended by others:

    onclick="$.cookie('clicks', $.cookie('clicks') + 1);"
    0 讨论(0)
 看不清?
提交回复
热议问题