Recently, I came across this issue I was working on one of the projects and in the theme, it is using a click Function on a <span> tag.
It was working fine on all browsers except Safari.
I did some research and found out a lot of people faced this kind of issue on Safari Browser.
Here is the code:
$('.menuOpen').on('click', function() {
console.log('Show Menu');
$('.menuBar').toggleClass('d-none');
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<span >Menu</span>
<ul >
<li>Action 1</li>
<li>Action 2</li>
<li>Action 3</li>
<li>Action 4</li>
</ul>Spoiler: My issue got resolved using role="button" on <span role="button">Menu</span>.
Here:
Click event on <span> or <div> tag not working safari issue
But this problem made me wonder as per HTML Standards what elements we can use for "Click" events.
As per my knowledge, we can add click events on almost all tags but as per HTML standard, we should add click events on <a> or <button> tags.
Are there any other HTML tags as per the standard we should use while triggering the click event?
CodePudding user response：
Faced the same issue few year's back. I am glad someone posted this thread.
At that time fixed this using onclick
<span onclick="FunctionName">Menu</span>
CodePudding user response：
just give your tag an atribute named onlcick and fill the function name in after that.
it doesnt realy mater what tag you use, you can use every tag as a clickable element on your webpage.
so no matter if its a <a> or a <button> a <p> or <div>
its just works with all tags in html
just do teh following to add click funcionallity to your tags
<span onclick="FunctionName">Menu</span>