On Multiple click events within Div return as one click

Question

I am in a bit of a bind. I have multiple cards.. with several click events possible (7) to be exact inside of each card.

I've added the same class to them all (each click event) with data tags that return different values.

Basically, I want to track all click events (7) at different times and check them as one per card.

If the user does anything within the card at all, count it as one event.. I am basically trying to count the views per card.

Right now I have something like this

 $(document).on("click", ".test", function() {
    console.log('Testing Stats View capture');
    var that = $(this);
    var testStats = that.data('capture-stats');
    console.log(testStats);   
 }));

Answer 1

count views per card

You can store the count on each card using this.data():

 $(document).on("click", ".card", function() {
 
     var clickcount = $(this).data("clickcount") || 0;
     clickcount++;
     $(this).data("clickcount", clickcount);
     
     console.log($(this).text() + " clicked: " + clickcount); 
     
 });

.card { cursor: pointer; user-select: none;  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='card'>card 1</div>
<div class='card'>card 2</div>
<div class='card'>card 3</div>

Answer 2

You could add a data attribute to the element triggering the event, at the end of your handler, and check its presence at the beginning, as a condition to perform a given logic:

 $(document).on("click", ".test", function() {
    console.log('Testing Stats View capture');
    var that = $(this);
 
    //if the prop data-event-triggered is not set yet for this element
    if ( !that.data('event-triggered') ){
      var testStats = that.data('capture-stats');
      //adds the prop data-event-triggered for this element
      that.data('event-triggered','true');
      console.log('event triggered-${testStats}');   
    }    
 });

.test {
  width: 100px;
  height: 100px;
  background: gray;
  cursor: pointer;
  margin-bottom:10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="test" data-capture-stats="1">1</div>

<div class="test" data-capture-stats="2">2</div>