点击Disable div按钮出现[Eventdelegation] ignoring target报错的解决方法

问题原因 #

这个提示通常是页面中存在全局事件委托逻辑，当你点击按钮后立刻隐藏父级div（#abc），导致事件委托的监听器无法找到事件的目标元素（按钮），从而抛出该警告。

修改方案 #

方案1：阻止事件冒泡到父级 #

修改按钮的点击事件，先阻止事件冒泡，再执行隐藏操作，避免全局委托监听器检测不到目标：

<div id='abc' class="formSection" style="margin: 0 auto;display: block;max-width: 1000px;">
    <fieldset>
        <select id="fileList" onchange="refreshPdf(this);"></select>
        <button onclick="event.stopPropagation(); disableDiv()">Disable div</button>
        <button onclick="enableDiv()">Enable div</button>
        <div class="cb"></div>
    </fieldset>
</div>
<script>
function disableDiv() {
    document.getElementById('abc').hidden = true;
}
function enableDiv() {
    document.getElementById('abc').hidden = false;
}
</script>

方案2：延迟执行隐藏操作 #

给隐藏操作加一个极短的延迟，让事件委托逻辑先完成目标元素的检测，再隐藏div：

<div id='abc' class="formSection" style="margin: 0 auto;display: block;max-width: 1000px;">
    <fieldset>
        <select id="fileList" onchange="refreshPdf(this);"></select>
        <button onclick="disableDiv()">Disable div</button>
        <button onclick="enableDiv()">Enable div</button>
        <div class="cb"></div>
    </fieldset>
</div>
<script>
function disableDiv() {
    setTimeout(() => {
        document.getElementById('abc').hidden = true;
    }, 10);
}
function enableDiv() {
    document.getElementById('abc').hidden = false;
}
</script>

方案3：改用CSS类控制显示隐藏 #

用添加/移除类的方式替代直接修改hidden属性，部分场景下可以避免委托逻辑的冲突：

<div id='abc' class="formSection" style="margin: 0 auto;display: block;max-width: 1000px;">
    <fieldset>
        <select id="fileList" onchange="refreshPdf(this);"></select>
        <button onclick="disableDiv()">Disable div</button>
        <button onclick="enableDiv()">Enable div</button>
        <div class="cb"></div>
    </fieldset>
</div>
<style>
.hidden { display: none !important; }
</style>
<script>
function disableDiv() {
    document.getElementById('abc').classList.add('hidden');
}
function enableDiv() {
    document.getElementById('abc').classList.remove('hidden');
}
</script>

以上三种方案都可以解决该警告，同时保证隐藏/显示功能正常运行，你可以根据页面实际的事件委托逻辑选择最合适的一种。

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