Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

为什么按钮onclick没被触发 #953

Open
dousha0w0 opened this issue Nov 13, 2024 · 0 comments
Open

为什么按钮onclick没被触发 #953

dousha0w0 opened this issue Nov 13, 2024 · 0 comments

Comments

@dousha0w0
Copy link

dousha0w0 commented Nov 13, 2024

<title>长按显示菜单</title> <style> html { height: 100%; margin: 0; }
    body {
        background-image: url("333.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        justify-content: center;
        align-items: center;
        max-height: 100vh;
        background-color: #f4f4f4;
    }

    #longPressImage {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    .aw {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: var(--weui-BG-1);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        overflow: hidden;
        outline: 0;
        display: none;
        animation: slideUp 0.3s ease-out forwards;
    }

    .actionsheet__mask {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: none;
        z-index: 10;
    }

    .first-button-gray {
        border-bottom: 1px solid #F2F2F3;
    }

    @keyframes slideUp {
        from {
            transform: translateY(100%);
        }

        to {
            transform: translateY(0);
        }
    }
</style>
长按显示菜单
    <div id="actionSheet_wrap" class="aw">
        <div id="weui-actionsheet">
            <div class="weui-actionsheet__title first-button-gray">是否扫码</div>
            <div class="weui-btn" id="scanYes" onclick="confirmAction()">是</div>
            <div class="weui-actionsheet__action">
             <div class="weui-actionsheet__cell" id="actionsheet_cancel">取消</div>
            </div>
            <div class="weui-actionsheet__menu">
            </div>
        </div>
    </div>
</div>

<script>
    document.addEventListener('DOMContentLoaded', function () {
    let pressTimer;
    const longPressImage = document.querySelector('#longPressImage img');

longPressImage.addEventListener('touchstart', function (event) {
event.preventDefault(); // 阻止默认行为
pressTimer = setTimeout(function () {
document.getElementById('actionSheet_wrap').style.display = 'block';
document.getElementById('mask').style.display = 'block';
}, 300);
});

longPressImage.addEventListener('contextmenu', function (event) {
event.preventDefault(); // 阻止默认的上下文菜单
});

  document.getElementById('scanYes').addEventListener('touchend', function () {
        console.log('Scan Yes clicked');
        confirmAction();
  });

  document.getElementById('actionsheet_cancel').addEventListener('touchend', function () {
        closeActionSheet();
  });

    document.getElementById('actionsheet_cancel').addEventListener('click', function () {
        closeActionSheet();
    });

    document.getElementById('mask').addEventListener('click', function () {
        closeActionSheet();
    });

    function closeActionSheet() {
        document.getElementById('actionSheet_wrap').style.display = 'none';
        document.getElementById('mask').style.display = 'none';
    }

    function confirmAction() {
        console.log("1111");
        window.open('https://www.baidu.com', '_self');
        console.log("2222");
        setTimeout(closeActionSheet, 10000);
    }
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant