Blazor Server问题：无法读取null的addEventListener属性及点击事件失效

核心原因 #

Blazor Server的组件是服务器端动态渲染的，document.onload触发时，你的scanner-page div还没被Blazor渲染到页面上，所以监听器根本没绑到目标元素上，自然点击没反应。

方案一：利用Blazor组件生命周期绑定事件 #

在Blazor组件的OnAfterRenderAsync生命周期方法里调用JS函数，这时候组件已经完成渲染，元素肯定存在：

1. 修改common.js，把绑定逻辑封装成函数：

export function bindScannerPageClick() {
    const element = document.getElementById('scanner-page');
    if (element) {
        element.addEventListener('click', touchHandler, true);
    }
}

function touchHandler(e) {
    if (e.type === "click") {
        alert("You clicked!");
    }
}

2. 在Blazor组件里注入IJSRuntime，然后在生命周期方法里调用这个JS函数：

@inject IJSRuntime JS

<div id="scanner-page">
    <!-- 组件内容 -->
</div>

@code {
    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 仅在首次渲染后绑定一次事件
            await JS.InvokeVoidAsync("bindScannerPageClick");
        }
        await base.OnAfterRenderAsync(firstRender);
    }
}

方案二：使用事件委托（无需修改Blazor组件） #

如果不想改Blazor代码，可以把监听器绑定到父元素（比如document），利用事件冒泡来捕获点击，这样不管元素什么时候渲染都能生效：

document.addEventListener('click', function(e) {
    if (e.target.id === 'scanner-page' || e.target.closest('#scanner-page')) {
        touchHandler(e);
    }
}, true);

function touchHandler(e) {
    alert("You clicked!");
}

这种方式不需要等元素渲染，只要点击的是目标div或者它的子元素，都会触发事件。

额外注意点 #

• 用方案一的话，记得删掉原来document.onload里的绑定代码，避免重复绑定。
• 检查scanner-page的CSS是否真的铺满页面：可以给父元素（body、html）设置height:100%，或者直接给div用100vh/100vw，还可以加个半透明背景测试点击区域：

#scanner-page {
    height: 100vh;
    width: 100vw;
    margin:0;
    padding:0;
    overflow: auto;
    background-color: rgba(0,0,0,0.1); /* 测试用，确认点击区域 */
}

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