页面加载完成后首次点击触发单次JavaScript函数执行需求

我们可以通过标记变量+单次事件绑定实现需求，核心逻辑是页面加载完成后给文档绑定点击事件，第一次点击时执行广告函数，之后立即解绑事件避免重复触发。以下是修改后的完整代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Clown Nights</title>
    <!-- Define the viewport -->
    <meta name="viewport"
          content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1.01">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta http-equiv="X-UA-Compatible" content="IE=10" />

    <!-- Include the HTML5 API files -->
    <script type="text/javascript" src="http://cdn.gameplayer.io/api/js/game.js"></script>
    <script type="text/javascript" src="http://cdn.gameplayer.io/api/js/developer.js"></script>

    <link rel="stylesheet" href="assets/game.css" type="text/css">
    <script src="js/globalconfig.js"></script>
    <script src="js/game.libs.js"></script>
    <script src="js/game.js"></script>
</head>

<body>
    <div id="gamediv"></div>
    <!--<div id="loader"></div>-->
    <canvas id="canvas" width="720" height="480" style="position: absolute; z-index: 1; display:block;"></canvas>

    <script>
        // 等待页面所有资源（脚本、图片等）完全加载完成
        window.addEventListener('load', function() {
            let hasTriggeredAd = false;

            function handleFirstClick() {
                if (!hasTriggeredAd) {
                    // 先判断函数是否存在，避免未定义报错
                    if (typeof Website2APK !== 'undefined' && typeof Website2APK.showInterstitialAd === 'function') {
                        Website2APK.showInterstitialAd();
                    }
                    hasTriggeredAd = true;
                    // 解绑点击事件，彻底阻止后续触发
                    document.removeEventListener('click', handleFirstClick);
                }
            }

            // 给整个文档绑定点击事件
            document.addEventListener('click', handleFirstClick);
        });
    </script>
</body>
</html>

关键说明 #

1. window.load 事件：确保页面所有资源加载完成后再绑定事件，避免Website2APK对象未初始化的问题。
2. 状态标记+事件解绑：通过hasTriggeredAd记录执行状态，同时在首次触发后移除点击事件，双重保障不会重复执行广告函数。
3. 类型判断：增加typeof检查，防止Website2APK未定义时抛出控制台错误。

内容的提问来源于stack exchange，提问作者Adnan Erkmen