Wie man li klickbar macht, ohne den inneren Anker zu beeinflussen?

Question

Ich habe eine Liste von Produkten, für die ich unten li:

Wenn Benutzer irgendwo auf der Li klickt, die ich verwenden möchte, um Produkt Seite z. /Produkt ID/. Wenn Benutzer die Maus über die li bewegen, zeige ich auch ein Symbol an, das, wenn es geklickt wird, Benutzern erlaubt, Produkt in Lieblingen hinzuzufügen.

<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> 

Ich weiß, ich kann das ganze li klickbar machen und den Benutzer mit javascript zur Produktdetailseite schicken.

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

Aber das Problem mit diesem Ansatz ist, dass, wenn ich auf Lieblingssymbol klicken, es auch Benutzer Detailseite Produkt senden.

Kann mir bitte jemand sagen, wie man das mit reinem JavaScript erreicht?

Answer 1

Sie haben eindeutig einen Event-Handler für die "Favorit" a Link, die das Hinzufügen der Sache zu den Favoriten behandelt. Lassen Sie diesen Ereignishandler die Weitergabe stoppen. Da der Klick ab diesem a stoppt, sprudelt es nie bis zum li, und Sie müssen sich nicht darum kümmern, dass es den Click-Handler li auslöst.

Wenn Sie Einhaken Ereignisse durch addEventListener, wird der Handler ein Event-Objekt, das stopPropgation hat, so:

yourEventArgument.stopPropagation(); 

Wenn Sie onxyz -Stil Ereignishandler verwenden, return false aus dem Handler; es tut das gleiche, stopPropgation tut (mehr auf meinem Blog: The true story on return false).