点击img修改父级a标签onclick属性时意外跳转如何修复

问题根因 #

你的问题是浏览器的事件冒泡机制导致的：第一次点击img元素触发handClick函数时，你修改了父级a标签的点击事件返回值为true，本次点击事件会继续向上冒泡到父级a标签，刚修改完的点击逻辑直接生效，就触发了跳转，根本等不到第二次点击。

修复方案 #

下面给两种可直接落地的修改方式：

方案1：阻止第一次点击的事件冒泡（改动最小） #

只需要两步修改：

1. 给img的点击事件传递事件对象

<img src="~/Resources/@card.Image" id="@card.ID" onclick="handClick(event, @((int)card.Value), @card.ID)" class="card" />

2. 在handClick函数末尾添加阻止冒泡的逻辑

function handClick(e, cardValue, cardID) {
    // ... 原有无关代码保留 ...
    var playedCard = document.getElementById(cardID);
    // ... 原有无关代码保留 ...
    playedCard.parentElement.onclick = function () { return true };
    // 新增：阻止本次点击事件冒泡到父级a标签，不会触发本次跳转
    e.stopPropagation();
}

方案2：用状态标记控制跳转（逻辑更清晰易维护） #

不用动态修改父元素的点击事件，直接用自定义属性标记激活状态：

1. 修改a标签的点击逻辑，判断激活状态决定是否跳转

<a href="@Url.Action("Index/" + @card.ID)" onclick="return this.dataset.isActivated === 'yes'" class="link">
    <img src="~/Resources/@card.Image" id="@card.ID" onclick="handClick(@((int)card.Value), @card.ID)" class="card" />
</a>

2. 修改handClick函数，只需要修改状态标记即可

function handClick(cardValue, cardID) {
    // ... 原有无关代码保留 ...
    var playedCard = document.getElementById(cardID);
    // ... 原有无关代码保留 ...
    // 给父级a标签加激活标记，下次点击就会跳转
    playedCard.parentElement.dataset.isActivated = 'yes';
}

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