How do I add ontouch event after onclick on same HTML span tag?

I added a span tag to wrap icon button (icon ion-md-chatbubbles) in my html page, and I added onclick event listener on the same tag

         ...
            <span onclick="(function($){
                $('.nav-tabs a[href=&quot;#tab-manga-discussion&quot;]').tab('show')
            })(jQuery);"
            >
            <a href="#manga-discussion"><i class="icon ion-md-chatbubbles"></i></a>
            </span> 
         ...

In desktop it works fine, however I also need to add a touch event listener in that span tag because in mobile devices an user has to touch twice in the icon button to navigate to nav-tab anchor element (#tab-manga-discussion). I tried to add ontouch event after onclick in the tag but didn’t work

ontouchstart="(function($){
                    $('.nav-tabs a[href="#tab-manga-discussion"]').tab('show')
                })(jQuery);"

In the end I would have the two events combined on same span tag

         ...
            <span onclick="(function($){
                $('.nav-tabs a[href=&quot;#tab-manga-discussion&quot;]').tab('show')
            })(jQuery);"
                ontouchstart="(function($){
                $('.nav-tabs a[href=&quot;#tab-manga-discussion&quot;]').tab('show')
            })(jQuery);"
            >
         ...

How can I solve this?

>Solution :

Intrinsic event attributes, like onclick are awful. They have weird scoping rules and are a form of eval. Best practice is to use the addEventListener method.

The touchstart event does not have an associated intrinsic event attribute. Use addEventListener instead.