再次遇到这样的问题,本来想改结构的,但是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()很重要