Is it possible to reset the class (in particular, its animation) to return to the initial state of the click

Question

I have an animation script that should change the div animation based on mouse events (e.g. mousemove, click, etc.). One of the problems is that the animation has to run every time you click the div button.

In Chrome, the only browser available for testing * (see note below) does not work:

 //The non-clicked class is "notClicked" //The clicked class is "clicked" //The will be referred to as elem elem.onclick = function(){ elem.className="notClicked"; elem.className="clicked"; } 

when an element is clicked once, it works as expected, but if it is double-clicked (two events are fired), the following will happen:

• in the item inspector, the class shows the change
• however, the animation continues as if the class never changed, and the second event never started.

NOTE. Unfortunately, I only have a chrome book, and I can not perform testing in another browser, since I only have chrome. I know that I am cheap. I apologize.

ADDITIONAL NOTE: native javascript is preferred, but jQuery solutions are not bad.

MORE NOTES: for clarity, since I think I confused many people when the object clicked a second time, the animation should start, not continue.

JS FIDDLE (on request): this fiddle

Answer 1

You need to use the timeout between deleting the class and re-adding it, because otherwise the amount of time the class is absent is too little for the browser to notice the difference.

Below is an example of what I mean. You could see that every time you click an element, it returns to its original state, and the animation restarts again and again.

 window.onload = function() { var el = document.querySelector('div'); el.addEventListener('click', function() { if (this.className == '') { /* for the first click, add class immediately */ this.className = 'animated'; } else { /* for second and subequent clicks, first remove class and add after timeout */ this.className = ''; window.setTimeout(function() { el.className = 'animated'; }, 100); } }); } 

 div { height: 200px; width: 200px; border: 1px solid; } .animated { animation: zoom 2s linear alternate infinite; } @keyframes zoom { to { transform: scale(1.25); } } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> <div>Moving Div!</div> 

---

NOTE The animation used in the above snippet is just an example to illustrate. I created it before I saw your violin. Sammy kindly provided the violin to match the animation in question. See the script here .

Answer 2

here is an example of how you can avoid the second click. the first click, he makes his son e.preventDefault(); in the second click, you can check if it was installed by clicking if (e.isDefaultPrevented()) { so you can run 2. click

 $add_table_form.on('submit', function (e) { if (e.isDefaultPrevented()) { } else { e.preventDefault(); save_table(); } });