I want to prevent click event when i am coming from parent to child element. I am trying to use Kendo Grid with Kendo Pager.

Here is Example - https://stackblitz.com/edit/angular-gjgypw-qmo6s6?file=app/app.component.ts

<ng-template kendoPagerTemplate let-totalPages="totalPages" let-currentPage="currentPage">
    <!-- This button should not be clicked when coming from parent element -->
    <button kendoGridFocusable (click)="sample()">Sample</button>
    <kendo-pager-prev-buttons></kendo-pager-prev-buttons>
    <kendo-slider
        kendoGridFocusable
        [showButtons]="false"
        tickPlacement="none"
        [max]="totalPages"
        [min]="1"
        (valueChange)="sliderChange($event)"
        [value]="currentPage">
    </kendo-slider>
    <kendo-pager-next-buttons></kendo-pager-next-buttons>
    <input
        kendoGridFocusable
        class="k-textbox k-input k-rounded-md"
        type="number"
        [value]="pageSize"
        (change)="onPageSizeChange($event.target.value)" />
    <kendo-pager-info></kendo-pager-info>
</ng-template>

The button is getting clicked when i am pressing enter button to get inside and access the buttons. If you see example, whenever we are pager, we need to press enter key to get accessible for all buttons inside it and Esc to get outside. Button should be clickable but should not be clickable when entering inside it.