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
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions