我在下面列出了我正在使用的产品:
当用户点击 li 上的任意位置时,我想使用它发送到产品详细信息页面,例如/产品/编号/。当用户将鼠标悬停在 li 上时,我还会显示一个图标,单击该图标后,用户可以在收藏夹中添加产品。
<ul>
<li class="media">
<div class="media-left">
<a href="/product/123/">
<thumb>
<div class="thumb">
<img src="/images/company-logo.jpg">
</div>
</thumb>
</a>
</div>
<div class="media-body">
<div class="item-actions autohide pull-right">
<a title="Add to Favorites"><i class="material-icons">favorite</i></a>
</div>
<div class="media-heading b">
<a href="/product/123">Demo Product</a>
</div>
<div class="text-sm">
<div style="height:16px;overflow:hidden;">Demo Manufacturer</div>
</div>
</div>
</li>
</ul>
我知道我可以使用 javascript 使整个行可点击并将用户发送到产品详细信息页面。
<li (click)="sendToproductDetailsPage(123)">
.....
</li>
但这种方法的问题在于,当我点击“收藏夹”图标时,它还会将用户转到产品详细信息页面。
谁能指导如何使用纯 JavaScript 实现这一点?
最佳答案
您显然有一个“收藏夹”a
链接的事件处理程序,用于处理将事物添加到收藏夹的操作。让该事件处理程序停止传播。由于点击从 a
停止,它永远不会冒泡到 li
,您不必担心它会触发 li
> 的点击处理程序。
如果您通过 addEventListener
连接事件,您的处理程序将获得一个具有 stopPropgation
的事件对象,因此:
yourEventArgument.stopPropagation();
如果您正在使用 onxyz
样式的事件处理程序,请从处理程序中返回 false
;它与 stopPropgation
做同样的事情(更多内容在我的博客上:The true story on return false
)。
关于javascript - 如何在不影响内部 anchor 的情况下使 li 可点击?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38943796/