Skip to content
New issue

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

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

Already on GitHub? # 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>
# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant