2016-08-17 4 views
4

私はコンソールにクリック量を印刷したいが、それはすべての空き領域でなければならない。出来ますか?クリック数を確認するには

私はボタンで試しましたが、私がしたいことができませんでした。

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

空き領域にクリック? – Pugazh

+1

''? – Tushar

+0

@ Tusharしようとすると、動作していないことがわかります – NoWeDoR

答えて

2

を、例えば、より高いレベルでイベントをクリックして聞きます<html>要素にあり、イベントのtargetプロパティが "空き領域"の定義を提供するかどうかを確認します。

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

これはまさに私が欲しかったものです。ありがとう! – NoWeDoR

0

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

0

さてあなたは何回ページ(H数えることができますTML)はこのように、クリックされた:

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

jsFiddle link

0

あなたは、ドキュメントオブジェクトにclickイベントリスナーを追加し、ボタンなどの要素でそれを上書きボタンを除いた場所で動作するようにクリックしたい場合は、

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>

関連する問題