如何在不影响内锚的情况下使li可点击

How to make li clickable without affecting inner anchor?

本文关键字：情况下 li 影响      更新时间：2023-09-26

我有一个我正在使用的产品列表:

当用户单击li上的任何地方，我想使用发送到产品详细信息页面，例如/product/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>

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

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

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

谁能请指导如何实现这与纯JavaScript?

您显然有一个用于"Favorite" a链接的事件处理程序，用于处理将内容添加到收藏夹中。让该事件处理程序停止传播。由于点击停止的a，它永远不会冒泡到li，你不必担心它触发li的点击处理程序。

如果你通过addEventListener连接事件，你的处理程序得到一个具有stopPropgation的事件对象，所以:

yourEventArgument.stopPropagation();

如果你使用onxyz风格的事件处理程序，return false从处理程序;它做了和stopPropgation一样的事情(更多在我的博客上: return false 的真实故事)。

相关文章：