Angular 2 - 當點擊父元素時防止點擊孩子？

當我點擊錨標記onClick函數被調用，但其子元素onclick函數也調用它。我想阻止這個，如果父元素被點擊，那麼爲什麼它的子元素單擊它。Angular 2 - 當點擊父元素時防止點擊孩子？

下面是代碼：

<li *ngFor = "let category of categories"> 
     <a href="javascript:void(0);" (click)="toggle($event);"> 
     <span class="ah-pull-left" style="padding: 7px 10px;font-size: 14px;"> 
      <span class="ah-hexa">C</span> 
     </span> 
     <span class="ah-pull-left">{{category.title}}</span> 
     <span class="ah-pull-right ah-sidebar-down-arrow" *ngIf = "category.submenu.length > 0"><i class="fa fa-angle-down" aria-hidden="true"></i></span> 
     </a> 
     <div id="{{category.id}}" class="ah-sidebar-sub-menu" *ngIf = "category.submenu"> 
      <ul> 
       <li *ngFor = "let subcategory of category.submenu"> 
        <a href="{{subcategory.link}}"> 
        <span class="ah-pull-left" style="font-size: 14px;"> 
         <span class="ah-hexa">{{subcategory.title.charAt(0)}}</span> 
        </span> 
        <span class="ah-pull-left">{{subcategory.title}}</span> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </li>

.TS

toggle(e) { 
    if(e.target || e.srcElement || e.currentTarget){ 
     console.log(e.target.parentNode) 
    } 
}

輸出在瀏覽器控制檯窗口：

來源

2017-08-01 Ahmer Ali Ahsan

答：

在我的情況下面的代碼工作：

<a #myElement href="javascript:void(0);" id="{{category.id}}" (click)="onClick(myElement.id);">

但我不知道該怎麼#myElement阻止子元素被點擊。順便說一句，這工作得很好，我得到了我點擊的實際元素。

這裏是我的.html代碼：

<li *ngFor = "let category of categories"> 
     <a #myElement href="javascript:void(0);" id="{{category.id}}" (click)="onClick(myElement.id);"> 
     <span class="ah-pull-left" style="padding: 7px 10px;font-size: 14px;"> 
      <span class="ah-hexa">C</span> 
     </span> 
     <span class="ah-pull-left">{{category.title}}</span> 
     <span class="ah-pull-right ah-sidebar-down-arrow" *ngIf = "category.submenu.length > 0"><i class="fa fa-angle-down" aria-hidden="true"></i></span> 
     </a> 
     <div class="ah-sidebar-sub-menu" *ngIf = "category.submenu" style="display: none"> 
      <ul> 
       <li *ngFor = "let subcategory of category.submenu"> 
        <a href="{{subcategory.link}}"> 
        <span class="ah-pull-left" style="font-size: 14px;"> 
         <span class="ah-hexa">{{subcategory.title.charAt(0)}}</span> 
        </span> 
        <span class="ah-pull-left">{{subcategory.title}}</span> 
        </a> 
       </li> 
      </ul> 
     </div> 
    </li>

這裏是我的.ts代碼：

onClick(e) { 
    console.log('HTML Element ID: ' + e); 
}

來源

2017-08-02 12:33:37

點擊事件被註冊在實際點擊的元素上。但它會向上冒泡，直到找到一個具有事件處理程序的元素。這就是爲什麼'event.target'是子元素的原因。如果你做'onClick（$ event，myElement.id）'，你仍然會看到子元素。不知道'＃myElement'在ng-for循環內工作。然後你可以做'＃myElement'和'onClick（myElement）'。不要以爲你需要'id =「{{category.id}}」'部分，除非你將它用於別的東西。 –

也許你可以像這樣將源元素髮送到onClickHandler。

function onClickA(event, element) { 
 
    console.log(event, element); 
 
    event.preventDefault(); 
 
}

<a onclick="onClickA(event, this)"> 
 
    <span>Hello</span> 
 
    <span>World</span> 
 
</a>

來源

2017-08-01 06:25:53

是在角2語法這項工作？ –

是的，我認爲是。 –

'this'關鍵字讓我的組件不是被單擊的元素。我不知道那裏出了什麼問題？如果我點擊了錨標記，那麼爲什麼其他元素點擊事件也在調用？如何防止這一點，只獲得點擊元素。 –

Angular 2 - 當點擊父元素時防止點擊孩子？

回答

相關問題