Question

我希望当用户点击桌面上的登录图标时，会显示模式对话框。然而，在移动设备和平板电脑这样的小型设备上，我想要一条反应路线来启动并显示在我的＆＃34; main＆＃34;内容区域，不使用模态对话框。

我不确定如何干净利落地做到这一点，首先我想的可能是有2次点击，一次用于触摸，一次用于点击，但是在ipad上会发生什么，它可能足够大以显示对话框，应该这样做

接下来我想的是只有两个单独的图标，并且根据我的媒体查询显示正确的图标，但我不喜欢重复的代码。

还有其他方法吗？我不想在我的java脚本代码中开始编写大小逻辑，因为现在正在媒体查询中处理其他所有内容。

Answer 1

您可以使用单个图标。

您可以使用matchMedia - 相当于CSS @media查询的javascript - 来确定浏览器视口是大还是小，然后在图标中添加一个类来记录此内容。

点击图标时：

如果它包含.larger-viewport类，则会显示模态对话框
如果它包含.smaller-viewport类，它将触发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>

移动和桌面的不同事件

1 个答案: