如何在不影響內錨的情況下讓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點擊？

回答

相關問題