mouseenter / mouseleave 与@HostListener
mouseenter / mouseleave with @HostListener
闪烁快要死了,在阅读了所有 jQuery 相关线程 和 mdn 之后,我仍然无法弄明白。
所以我有这个用于显示工具提示的@Directive,这就是我将它绑定到元素的方式:
@HostListener('mouseenter', ['$event']) onEnter( e: MouseEvent ) {
this.showTooltip(e);
}
@HostListener('mouseleave', ['$event']) onLeave( e: MouseEvent ) {
this.hideTooltip(e);
}
@HostListener('click', ['$event']) onClick( e: MouseEvent ) {
this.hideTooltip(e);
}
constructor(
private el: ElementRef,
private renderer: Renderer2,
private coordsService: CoordsService,
@Inject(DOCUMENT) doc
) {
this.docBody = doc.body;
}
public ngAfterViewInit(): void {
this.tooltipContainer = this.renderer.createElement('div');
this.renderer.addClass( this.tooltipContainer, 'tooltip--tip');
this.renderer.addClass( this.tooltipContainer, 'tooltip--pos_' + this.position);
}
public showTooltip( e: MouseEvent ): void {
if ( this.tooltip !== null ) {
// text
this.selectedTooltip = this.renderer.createText( this.tooltip );
// append to body
this.renderer.appendChild( this.tooltipContainer, this.selectedTooltip);
this.renderer.appendChild( this.docBody, this.tooltipContainer );
// target element
const target: HTMLElement = <HTMLElement>e.target;
const bbox: ClientRect = target.getBoundingClientRect();
// the array holds the pixel position of the property; should sync with top:left
let coords: ElementCoords = this.coordsService.setPositionCoords(bbox, this.position, this.tooltipContainer, { left: -6 } );
// write position
this.renderer.setStyle( this.tooltipContainer, 'top', coords.top+'px' );
this.renderer.setStyle( this.tooltipContainer, 'left', coords.left+'px' );
}
}
public hideTooltip( e: MouseEvent ): void {
if ( this.selectedTooltip ) {
this.renderer.removeChild ( this.tooltipContainer, this.selectedTooltip);
this.renderer.removeChild( this.docBody, this.tooltipContainer );
this.selectedTooltip = null;
}
}
每个 <span>
中包含文本的内容都会闪烁。每个包含 SVG 的选择器都会闪烁...有什么想法吗?
PS。不知何故 el: ElementRef
没有被使用,尽管我出于某种原因注入了它。尝试匹配对它的引用 - 仍然没有成功。
您的 tooltipContainer 正在触发 mouseleave
,因为它位于元素上方。如果您不介意,您不能 click/select 那里的任何东西。在您的 css 中将 pointer-events: none
设置为 tooltipContainer。
您使用指令 (mouseenter) 输入元素,工具提示容器将越过该元素。现在工具提示上有光标。啊哈!这会触发带有指令的元素的 (mouseleave),因此工具提示消失。但是,嘿,不是指令再次有光标......(mouseenter)!......但是嘿!工具提示再次位于光标下...(鼠标离开)...等等 :)
使用指针事件,您可以确保覆盖元素不会收到任何事件,并且这些事件会触发到其下方的元素。但是,您也可以尝试使工具提示不与元素重叠,但这取决于您
闪烁快要死了,在阅读了所有 jQuery 相关线程 和 mdn 之后,我仍然无法弄明白。
所以我有这个用于显示工具提示的@Directive,这就是我将它绑定到元素的方式:
@HostListener('mouseenter', ['$event']) onEnter( e: MouseEvent ) {
this.showTooltip(e);
}
@HostListener('mouseleave', ['$event']) onLeave( e: MouseEvent ) {
this.hideTooltip(e);
}
@HostListener('click', ['$event']) onClick( e: MouseEvent ) {
this.hideTooltip(e);
}
constructor(
private el: ElementRef,
private renderer: Renderer2,
private coordsService: CoordsService,
@Inject(DOCUMENT) doc
) {
this.docBody = doc.body;
}
public ngAfterViewInit(): void {
this.tooltipContainer = this.renderer.createElement('div');
this.renderer.addClass( this.tooltipContainer, 'tooltip--tip');
this.renderer.addClass( this.tooltipContainer, 'tooltip--pos_' + this.position);
}
public showTooltip( e: MouseEvent ): void {
if ( this.tooltip !== null ) {
// text
this.selectedTooltip = this.renderer.createText( this.tooltip );
// append to body
this.renderer.appendChild( this.tooltipContainer, this.selectedTooltip);
this.renderer.appendChild( this.docBody, this.tooltipContainer );
// target element
const target: HTMLElement = <HTMLElement>e.target;
const bbox: ClientRect = target.getBoundingClientRect();
// the array holds the pixel position of the property; should sync with top:left
let coords: ElementCoords = this.coordsService.setPositionCoords(bbox, this.position, this.tooltipContainer, { left: -6 } );
// write position
this.renderer.setStyle( this.tooltipContainer, 'top', coords.top+'px' );
this.renderer.setStyle( this.tooltipContainer, 'left', coords.left+'px' );
}
}
public hideTooltip( e: MouseEvent ): void {
if ( this.selectedTooltip ) {
this.renderer.removeChild ( this.tooltipContainer, this.selectedTooltip);
this.renderer.removeChild( this.docBody, this.tooltipContainer );
this.selectedTooltip = null;
}
}
每个 <span>
中包含文本的内容都会闪烁。每个包含 SVG 的选择器都会闪烁...有什么想法吗?
PS。不知何故 el: ElementRef
没有被使用,尽管我出于某种原因注入了它。尝试匹配对它的引用 - 仍然没有成功。
您的 tooltipContainer 正在触发 mouseleave
,因为它位于元素上方。如果您不介意,您不能 click/select 那里的任何东西。在您的 css 中将 pointer-events: none
设置为 tooltipContainer。
您使用指令 (mouseenter) 输入元素,工具提示容器将越过该元素。现在工具提示上有光标。啊哈!这会触发带有指令的元素的 (mouseleave),因此工具提示消失。但是,嘿,不是指令再次有光标......(mouseenter)!......但是嘿!工具提示再次位于光标下...(鼠标离开)...等等 :)
使用指针事件,您可以确保覆盖元素不会收到任何事件,并且这些事件会触发到其下方的元素。但是,您也可以尝试使工具提示不与元素重叠,但这取决于您