Question

我在li下面有一个我正在使用的产品列表：

当用户点击li上的任何位置时，我想用来发送到产品详情页面，例如/产品/ ID /。当用户将鼠标悬停在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>

我知道我可以使整个li可点击并使用javascript将用户发送到产品详细信息页面。

<li (click)="sendToproductDetailsPage(123)">
.....
</li>

但这种方法的问题是，当我点击收藏夹图标时，它还会将用户发送到产品详细信息页面。

任何人都可以指导如何使用纯JavaScript实现这一目标吗？

Answer 1

你显然有一个事件处理程序，用于＆＃34;收藏夹＆＃34;处理将事物添加到收藏夹的a链接。让该事件处理程序停止传播。由于点击从a停止，因此它永远不会冒出li，并且您不必担心会触发li点击处理程序。

如果你通过addEventListener连接事件，你的处理程序会获得一个stopPropgation的事件对象，所以：

yourEventArgument.stopPropagation();

如果您正在使用onxyz - 样式事件处理程序，return false来自处理程序; stopPropgation做了同样的事情（更多在我的博客上：The true story on return false）。

如何使li可点击而不影响内锚？

1 个答案: