冒泡

再次遇到这样的问题,本来想改结构的,但是flex的布局,再改结构,可能又要嵌套一层,所以,直接从点击事件入手。

这里要注意的是事件的冒泡机制,解决思路:父级的点击事件,不允许覆盖子级的点击事件,也就是子级的事件的优先级高于父级。

<li class="grid-row" onclick="location.href='/?_path=manager/base/goods/action&_dir=wxmwt&matid=<?=$good['id']?>'">
    <div class="goods-name">
        <p><?= $good['name'] ?></p>
        <span><?= $good['suppliername'] ?></span>
    </div>
    <div class="price-num"></div>
    <div class="stock-num"></div>
    <div class="del-opt" ><p onclick="deleteGoods(<?=$good['id']?>)"><span class="icon-remove" ></span></p></div>
</li>

解决方法:

function deleteGoods(id){
    if(confirm("确认删除该商品?")){
        location.href = "/?_path=manager/base/goods/list&_dir=wxmwt&matid="+id;
        // 阻值冒泡
        event.stopPropagation();
    }else{
        return false;
    }
}

总结:event.stopPropagation()很重要

原文地址:https://www.cnblogs.com/wang715100018066/p/6903611.html