如何在不影响内锚的情况下让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实现这一目标？

来源

2016-08-14 Naveed Ahmed

该规范禁止互动元素拥有互动死者。您最好的选择是创建一个像这样的结构：'li> a.product + a.favorite'并使用CSS处理外观，您可以让产品链接占据所有空间，并且最喜欢的链接被“绝对”定位 – Aziz

是' ''最喜欢的图标“？ “点击”不应该“发送到产品详细信息页面”？ – guest271314

@Aziz：上面没有规范违规。规范并没有说你不能在包含可点击元素的元素上单击处理程序;一半的网络将被打破。 “互动内容”在规范中有[特定含义]（https://www.w3.org/TR/html5/dom.html#interactive-content-0）。 –

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

如果通过addEventListener挂钩的事件，您的处理程序获取具有stopPropgation事件对象，所以：

yourEventArgument.stopPropagation();

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

来源

2016-08-14 15:46:42

非常感谢T.J. Crowder event.stopPropagation（）是我需要的。 –

如何在不影响内锚的情况下让li点击？

回答

相关问题