Empty event listener: Is this normal?

Question

Some brief information

I am creating an iOS application that uses html web views in some areas. I wanted to make sure that the html buttons on these pages looked as much as the iOS buttons as much as possible. To achieve this, I needed the state of the tap so that the html button is pressed when pressed. Now in HTML it's easy. You just set the style for: active or: hover or something else. In fact, I have already defined this. However, on iOS, these states do not connect to the tap - at least, usually. So my goal was to write a little script that added a class to the button to change the look of ontouchstart.

Problem

However, it turned out that I did not need to complicate ... by pure chance I checked the test with the following code:

document.addEventListener('touchstart', function(event) { console.log("test"); }, true); 

I am pretty green with javascript and jQuery, so all I intended to do was check my syntax and make sure that eventListener fired when I pressed the button. To my surprise, the button: active states in running css (as well as states: hover). This code ... solved my problem!

My question

So here is my question: is the above code really? I mean, is it bad to do this? As if the empty eventListener simply triggered the behavior that desktop browsers already offer. Is there something wrong with this method? I am green, but I do not want to pick up bad habits. If this is a bad coding method, I do not want to use it.

Thanks for any insights you guys can give me in this!

Answer 1

I personally do not think that something is wrong with an empty event listener (with the exception of the overhead of calling a function, which in any case sounds insignificant). I would advise you to use the jQuery noop function, although if you have to add an event listener, but do nothing:

 $(document).on('touchstart', $.noop); // or document.addEventListener('touchstart', $.noop);