如何在跨度中使用指针事件样式

Question

嗨，我的风格有问题，我不知道如何解决。 样式指针事件：无不起作用。

这是我的代码示例：

风格：

.noclick {    
     cursor: default;
     pointer-events: none;
}

还有我的 html：

<p-autoComplete
[(ngModel)]="searchModel"
[suggestions]="items"
[maxlength]="1024"
(completeMethod)="search($event.query)"
[placeholder]=""
(onSelect)="select($event)"
[emptyMessage]="'Nothing'"
(onBlur)="clear()"
(onFocus)="open()"
[disabled]="disabled"
#autocompletePanel
[ngClass]="{'search-icon': searchIcon}"
[delay]="0"
>
    <ng-template let-searchModel pTemplate="item">
        <div class="ui-helper-clearfix">
            <span *ngIf="searchModel.title" class="noclick">{{ searchModel.title }}</span>
            <span *ngIf="!searchModel.title">{{ searchModel.shortName || searchModel.fullName }}</span>
        </div>
    </ng-template>
</p-autoComplete>

Answer 1

使用display: inline-block可能会有所帮助。

.noclick {    
     cursor: default;
     pointer-events: none;
     display: inline-block;
}

Answer 2

如果这有帮助，请使用它

1. 不要使用指针事件 css，因为这只会停止您应用它的元素的点击事件，但父传播不会被它停止，为此您还需要防止父点击

2. 改用指令来防止点击事件和父级传播

看看这个链接：

https://stackblitz.com/edit/primeng-autocomplete-23yqee

有关指针事件的更多信息，请阅读：

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events