Javascript
 Computer >> コンピューター >  >> プログラミング >> Javascript

複数のdivの内側/外側のイベント「クリック」の条件を作成する方法-JavaScript？

クリックにはイベントリスナーを使用できます。

例

以下はコードです-

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
   <div class="divDemo">
      First Division
   </div>
   <div class="divDemo">
      Second Division
  </div>
</body>
<script>
   document.addEventListener('click', callEventFuncion)
   function callEventFuncion(event) {
      var div = document.querySelectorAll('.divDemo');
      var titleResult = document.querySelectorAll('.my-title');
      var result = Array.apply(0, div).find((v) => v.contains(event.target));
      if (result) {
         console.log(" Incrementing Division Selection");
      }
      else {
         console.log("Incrementing Element Only OutSide of DIV");
      }
   }
</script>
</html>

上記のプログラムを実行するには、ファイル名「anyName.html（index.html）」を保存します。ファイルを右クリックし、VisualStudioコードエディターで[LiveServerで開く]オプションを選択します。

出力

これにより、コンソールに次の出力が生成されます-

複数のdivの内側/外側のイベント「クリック」の条件を作成する方法-JavaScript？

分割をクリックすると、分割部分がインクリメントされます。それ以外の場合は、分割の外側でインクリメントされます。

ケース1

ユーザーがdivセクションをクリックしたとき。ここでは、divセクションを2回クリックしました。スナップショットは次のとおりです-

複数のdivの内側/外側のイベント「クリック」の条件を作成する方法-JavaScript？

コンソールの出力-

複数のdivの内側/外側のイベント「クリック」の条件を作成する方法-JavaScript？

ケース2

今、私はdivセクションの外側を7回クリックしています。スナップショットは次のとおりです-

これにより、コンソールに次の出力が生成されます-

複数のdivの内側/外側のイベント「クリック」の条件を作成する方法-JavaScript？


  1. ボタンクリック時にJavaScriptでdivを非表示にする方法は？

    次は私たちのdivだとしましょう- <div id="showOrHide"> Welcome in JavaScript </div> 以下は私たちのボタンです。クリックすると、上記のdivが非表示になります- <button onclick="showOrHideDiv()">Click The Button</button> JavaScriptでstyle.displayの概念を使用して、divを非表示にします。以下はコードです- 例 <!DOCTYPE html> <ht

  2. JavaScriptでボタンをクリックした後にテキストフィールドを空にするにはどうすればよいですか？

    これには、onclick =” yourFunctionName（）”、および-を使用できます。 document.getElementById(“”).value=’’ 例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initialscale