2011-05-02 5 views
4

자바 스크립트가있는 링크의 클릭 수를 계산할 수 있습니까?자바 스크립트로 클릭 수를 계산하는 방법은 무엇입니까?

+0

가 어떻게 클릭 수를 계산 의미합니까? 이중 클릭 또는 삼중 클릭을 확인하거나 onClick이 트리거 된 횟수를 세는 것과 같은 의미입니까? –

+0

좀 더 설명해야합니다. 문맥은 무엇입니까? –

+1

"누구든지이 문제에 관해 이야기 할 수있는 자료를 게시 할 수 있습니까?" 물론 : http : // google.com – themerlinproject

답변

6

한 번의 요청으로 클릭 수를 계산할 수 있습니다 (예 : 페이지를로드 한 후 버튼을 몇 번 클릭했는지 등). 다른 페이지를로드하거나 현재 페이지를 다시로드 한 후에는 요청에 대한 클릭 수를 계산할 수 없습니다.

예 :

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

UPDATE :

또한 다른 사람의 추천으로 쿠키를 사용하여 계속하려면 다음 (사용하여 jQuery를) 사용할 수 있습니다

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

글쎄, 묻는 사람은 컨텍스트에 따라 페이지 계산 사이에 달성하기 위해 쿠키를 사용할 수 있습니다. –

2

물론, 카운터 변수를 검색, 증분 및 저장하는 <a> 태그에 onclick 이벤트 처리기 함수를 추가합니다. 이것을 숨겨진 필드에 검색하여 저장할 수 있습니다. 그러나 페이지에서 다른 곳으로 이동하면 정보가 손실됩니다.

// 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를 :

+0

하지만 쿠키를 사용하여 변수를 저장하면 다음에 페이지를 방문 할 때까지 남아있게됩니까? – user719813

+0

예, 데이터를 쿠키에 저장할 수 있습니다. –

+0

@ user733618 확실히. 이 경우 검색 및 저장 프로세스는 숨겨진 레이블이 아닌 쿠키와 함께 수행됩니다. –

1

는이 스크립트가있는 페이지의 링크를 모든 클릭 수를 계산할 수있는 그들의 추적은 자신의 일부 관심이있을 수 있기 때문에 나는 앵커 링크에 대해 걱정하지 마십시오. 그렇다면 a.href에 for 루프에 location.href + '#'가 포함되어 있는지 테스트하십시오.

+0

클릭이 A의 자식 일 수 있기 때문에 DOM을 위로 올려야합니다. 또한 앵커도 A 요소이지만 링크는 아니므로'document.links'를 살펴 보는 것이 좋습니다. – RobG

+0

document.links 아이디어를 가져 주셔서 감사합니다! 이것은 href 속성을 테스트 할 때 getElementsByTagName으로도 가능합니다. 그러나 닻 연결은 나가 그들에 누르기가 약간 유익한 가치가 있을지도 모르기 때문에, 나가 대략 대략 걱정하는 무언가가 아니다. –

1

웹 서버 로그에서 직접 또는 실제 내용을로드하기 위해 ?id=1234을 확인하는 코드에서 서버 요청을 계산해야합니다.

(로그인, 쿠키, IP 주소)를 알리는 방법이 있다고 가정하면 페이지 작성자가 ID를 제공 한 요청을 계산하지 마십시오. 코드에서 오히려 더 쉬울 것입니다 서버 로그보다

0

아마도 사용자가 방문한 페이지를 확인하기 위해 사용자가 클릭 한 페이지의 링크 수를 확인하려고합니다. 이는 사용자가 여러 가지 방법으로 링크를 클릭하지 않고도 (상황에 맞는 메뉴, 새 탭으로 드래그, 링크 위치 복사 등) 링크를 방문 할 수 있기 때문에 신뢰할 수없는 전략입니다.

현재 페이지에서 클릭 한 링크의 수를 알고 싶으면 링크를 클릭하면 다른 페이지로 이동해야하므로 대답은 0입니다. 탐색을 방지하기 위해 수신기를 사용하는 경우 동일한 수신기가 클릭 수를 계산할 수도 있습니다.

1
<script type="text/javascript"> 

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

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

당신은 연결 시간을 클릭했다.

0

다음은 클릭 수 사이의 제한 요인이 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>

관련 문제