移动和台式机的不同事件

Question

I want to have when a user clicks a login icon on desktop it would have a modal dialog show up. However on smaller devices like mobile and tablets, I want a reactjs route to kick in and show in my "main" content area and not use a modal dialog.

I am not sure how to do this cleanly, first I was thinking maybe there are 2 clicks, one for touch and one for click but what happens on ipad where it might be big enough to show a dialog and should go that way.

Next I was thinking of just having 2 separate icons and depending on my media query it shows the right one, though I just don't like the duplicate code.

Any other ways? I don't want to start writing size logic in my java script code as everything else is being handled in media queries right now.

Answer 1

You can use a single icon.

You can use matchMedia - the javascript equivalent of CSS @media queries - to determine whether the browser viewport is larger or smaller and then add a class to the icon to record this.

When the icon is clicked:

• if it contains the .larger-viewport class, it will bring up the modal dialog
• if it contains the .smaller-viewport class, it will fire the reactjs.

 // Initialise Variables var iconForModal; var iconForReact; var loginIcon = document.getElementsByClassName('login-icon')[0]; // Check and record viewport size function checkViewportSize() { if (window.matchMedia("(max-width: 800px)").matches) { loginIcon.className = 'login-icon larger-viewport'; } else { loginIcon.className = 'login-icon smaller-viewport'; } } window.addEventListener('resize', checkViewportSize, false); window.addEventListener('load', checkViewportSize, false); // Activate Login function activateLogin() { if (loginIcon.classList.contains('larger-viewport')) { console.log('Login Modal Activated'); } if (loginIcon.classList.contains('smaller-viewport')) { console.log('Login React Activated') } } loginIcon.addEventListener('click', activateLogin, false); 

 <button type="button" class="login-icon">Login</button>