Skip to content

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

@dousha0w0

Description

@dousha0w0
<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>

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions