javascript - 如何在不影响内部 anchor 的情况下使 li 可点击？

Question

我在下面列出了我正在使用的产品:

当用户点击 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 实现这一点？

Answer 1

您显然有一个“收藏夹”a 链接的事件处理程序，用于处理将事物添加到收藏夹的操作。让该事件处理程序停止传播。由于点击从 a 停止，它永远不会冒泡到 li，您不必担心它会触发 li > 的点击处理程序。

如果您通过 addEventListener 连接事件，您的处理程序将获得一个具有 stopPropgation 的事件对象，因此:

yourEventArgument.stopPropagation();

如果您正在使用 onxyz 样式的事件处理程序，请从处理程序中返回 false；它与 stopPropgation 做同样的事情(更多内容在我的博客上:The true story on return false)。