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

Question

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=&quot;#tab-manga-discussion&quot;]').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);"
            >
         ...

Edit:

I replaced the codes above in favor of inline-js script and addEventListener() method

...
                <span id="action_icon_wrapper">
                <a href="#manga-discussion"><i class="icon ion-md-chatbubbles"></i></a>
                <script type="text/javascript">
                        if(!is_touch_enabled())
                        document.getElementById("action_icon_wrapper").addEventListener("click", nav_icon_button);

                        if(is_touch_enabled())
                            document.getElementById("action_icon_wrapper").addEventListener("touchstart", nav_icon_button, false);

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

                        function is_touch_enabled() {
                            return ( 'ontouchstart' in window ) ||
                            ( navigator.maxTouchPoints > 0 ) ||
                            ( navigator.msMaxTouchPoints > 0 );
                        }
                    </script>
                </span>
...

The script works fine in desktop, but strangely on mobile devices the user needs to tap for the second time to go to discussion tab-pane section. If that happens as long as the page isn't refreshed (reloaded) works fine.

How can I solve that?

score 2 · Answer 1 · answered May 31 '22 at 09:12

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.

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

1 Answers1