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);   
 }));

7 different click event handlers on one element is a code smell. Why are you doing this - I'm certain there's a better way to achieve your goal which will also avoid the need to address the issue in your question. If you could edit the question to include a more complete example, then we can offer more assistance — Rory McCrossan
– Rory McCrossan, Commented Apr 26, 2022 at 9:31
Without seeing HTML, I read this as 7 click events on 7 different cards "add class to them all" and "count the views per card" with one handler (code and "check them as one")- but the "I have a card" conflicts this. — fdomn-m
– fdomn-m, Commented Apr 26, 2022 at 9:34

fdomn-m · Accepted Answer · 2022-04-26 09:32:53Z

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>

answered Apr 26, 2022 at 9:32

fdomn-m

28.8k8 gold badges39 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diego D · Accepted Answer · 2022-04-26 10:04:01Z

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>

Collectives™ on Stack Overflow

On Multiple click events within Div return as one click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related