2016-08-17 7 views
4

Ich möchte Klickmenge auf Konsole drucken, aber es muss für alle leeren Bereiche sein. Ist es möglich?Wie finde ich Klickmenge?

Ich habe mit Knopf versucht, aber konnte nicht tun, was ich will.

HTML:

<!DOCTYPE html> 
    <html> 
     <head> 
      <meta charset="UTF-8"> 
      <script src="myScript3.js"></script> 
     </head> 

     <body> 
      <button onclick="tiklama()">Tıkla!</button> 
     </body> 
    </html> 

JS:

var x = 0; 
function tiklama() { 
    console.log(++x); 
} 
+0

Klicks auf leeren Bereich ?? – Pugazh

+1

''? – Tushar

+0

@Tushar, wenn Sie versuchen, können Sie sehen, dass nicht funktioniert – NoWeDoR

Antwort

2

Hören Ereignis auf einer höheren Ebene klicken, z.B. auf <html> Element und überprüfen Sie, ob die target Eigenschaft der Veranstaltung Ihre Definition einer "leeren Fläche" entspricht.

var counter = 0; 
 
document.documentElement.addEventListener('click', 
 
    function(e) { 
 
     // counting all clicks except on the interactive elements 
 
     if (!e.target.matches('button,input,textarea,select')) { 
 
      console.log(++counter); 
 
     } 
 
    }, 
 
    false);
<p>Some text -- considered non-interactive area.</p> 
 
<button>An interactive button</button>

+0

Das ist genau das, was ich wollte. Vielen Dank! – NoWeDoR

0

var x = 0; 
 
function tiklama() { 
 
    alert(++x); 
 
}
<button onclick="tiklama()">Tıkla!</button>

0

Nun könnte man zählen, wie oft die Seite (h tml) geklickt wurde, wie folgt aus:

var x = 0; 
$('html').click(function() { 
    ++x; 
    document.getElementById("number").innerHTML = x; 
}); 

jsFiddle link

0

wenn Sie klicken möchten Orten arbeiten, außer die Schaltfläche dann das Click-Ereignis-Listener auf das Objekt Dokument hinzufügen und auf die Schaltfläche Element außer Kraft setzen, wie;

var body = document.getElementsByTagName("body")[0]; 
 
document.addEventListener("click", e => tickText.textContent += "tick..! "); 
 
myButton.addEventListener("click", e => e.stopPropagation());
<button id="myButton">Tıkla!</button> 
 
<p id="tickText"></p>