处理单击并悬停在同一元素上并保持弹出模式打开,直到弹出模式悬停在上方
Handling click and hover on same element and keeping the popup modal opened till the time popup modal is hovered over
我已经在一个元素上实现了点击和悬停功能,从以前的回答我已经解决了相对于鼠标指针的弹出位置。
但是现在我想修复悬停在悬停元素旁边的垂直中间时的弹出模式位置。
问题是当我将鼠标悬停在元素上时,弹出模式开始闪烁,当我以某种方式单击元素内的其他位置时,模式最终打开。
点击
单击时全屏显示弹出模式(这个东西有效,但不是以正确的方式,闪烁的东西)+当弹出模式被悬停时,它应该被保留打开。
一旦打开弹出模式,弹出模式只能在点击发生在模式之外的任何地方时关闭
悬停
显示弹出模式在悬停元素的旁边垂直居中(这个东西也可以,但定位不正确)+
当悬停弹出模式时,它应该保持打开状态。
在这种情况下,只要鼠标离开元素或弹出模式,弹出模式就应该关闭。
最小可重现示例
https://stackblitz.com/edit/angular-yybbgm?file=src/app/app.component.html
app.component.html
<div class="box"
(mouseenter)="addClickEvent($event)"
(mouseleave)="addClickEvent($event)"
(mousemove)="addClickEvent($event)"
(click)="addClickEvent($event)">
</div>
<fs-modal *ngIf="modalShow"
[ngStyle]="{'top.px': (zoneIsClicked ? 0 : modaltop) ,
'left.px':(zoneIsClicked ? 0 : modalleft)}"
[ngClass]="zoneIsClicked ? 'zoneClicked' : 'zoneNotClicked'">
</fs-modal>
app.component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
name = 'Angular';
modalShow = false;
modalleft;
modaltop;
zoneIsClicked;
addClickEvent(e) {
if(e.type === 'click'){
this.modalShow = true;
this.zoneIsClicked = true;
}
/*else if (e.type === 'mousemove') {
this.modalleft = e.clientX
this.modaltop = e.clientY
}*/
else if (e.type === 'mouseenter') {
this.modalShow = true;
this.zoneIsClicked = false;
this.modalleft = e.clientX
this.modaltop = e.clientY
}
else if (e.type === 'mouseleave') {
this.modalShow = false;
}
}
}
app.component.css
.box{
width: 100px;
height: 100px;
background: rgba(254, 249, 247, 1);
border: 1.5px solid #e24301;
margin: 50px;
font-size: 0.8rem;
position: absolute;
}
.zoneClicked{
display: block;
position: absolute;
width: 900px;
}
.zoneNotClicked{
position: absolute;
width: 50%;
}
fsmodal.component
import { Component, Input } from '@angular/core';
@Component({
selector: 'fs-modal',
template: `<div [ngStyle]="{'border':'1px solid black'}">ok</div>`,
styles: [`h1 { font-family: Lato; }`]
})
export class fsModalComponent {
}
对您的 ts 文件进行一些更改。删除框的 mousemove
事件并处理框 div
的 mouseleave
事件
https://stackblitz.com/edit/angular-rkve7b?file=src/app/app.component.ts
您可以使用 getBoundingClientRect()
找到悬停元素的确切位置并将这些值设置为您的弹出窗口。请在下面找到演示。
我已经在一个元素上实现了点击和悬停功能,从以前的回答我已经解决了相对于鼠标指针的弹出位置。
但是现在我想修复悬停在悬停元素旁边的垂直中间时的弹出模式位置。
问题是当我将鼠标悬停在元素上时,弹出模式开始闪烁,当我以某种方式单击元素内的其他位置时,模式最终打开。
点击
单击时全屏显示弹出模式(这个东西有效,但不是以正确的方式,闪烁的东西)+当弹出模式被悬停时,它应该被保留打开。
一旦打开弹出模式,弹出模式只能在点击发生在模式之外的任何地方时关闭
悬停
显示弹出模式在悬停元素的旁边垂直居中(这个东西也可以,但定位不正确)+
当悬停弹出模式时,它应该保持打开状态。
在这种情况下,只要鼠标离开元素或弹出模式,弹出模式就应该关闭。
最小可重现示例
https://stackblitz.com/edit/angular-yybbgm?file=src/app/app.component.html
app.component.html
<div class="box"
(mouseenter)="addClickEvent($event)"
(mouseleave)="addClickEvent($event)"
(mousemove)="addClickEvent($event)"
(click)="addClickEvent($event)">
</div>
<fs-modal *ngIf="modalShow"
[ngStyle]="{'top.px': (zoneIsClicked ? 0 : modaltop) ,
'left.px':(zoneIsClicked ? 0 : modalleft)}"
[ngClass]="zoneIsClicked ? 'zoneClicked' : 'zoneNotClicked'">
</fs-modal>
app.component
import { Component } from '@angular/core';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
name = 'Angular';
modalShow = false;
modalleft;
modaltop;
zoneIsClicked;
addClickEvent(e) {
if(e.type === 'click'){
this.modalShow = true;
this.zoneIsClicked = true;
}
/*else if (e.type === 'mousemove') {
this.modalleft = e.clientX
this.modaltop = e.clientY
}*/
else if (e.type === 'mouseenter') {
this.modalShow = true;
this.zoneIsClicked = false;
this.modalleft = e.clientX
this.modaltop = e.clientY
}
else if (e.type === 'mouseleave') {
this.modalShow = false;
}
}
}
app.component.css
.box{
width: 100px;
height: 100px;
background: rgba(254, 249, 247, 1);
border: 1.5px solid #e24301;
margin: 50px;
font-size: 0.8rem;
position: absolute;
}
.zoneClicked{
display: block;
position: absolute;
width: 900px;
}
.zoneNotClicked{
position: absolute;
width: 50%;
}
fsmodal.component
import { Component, Input } from '@angular/core';
@Component({
selector: 'fs-modal',
template: `<div [ngStyle]="{'border':'1px solid black'}">ok</div>`,
styles: [`h1 { font-family: Lato; }`]
})
export class fsModalComponent {
}
对您的 ts 文件进行一些更改。删除框的 mousemove
事件并处理框 div
mouseleave
事件
https://stackblitz.com/edit/angular-rkve7b?file=src/app/app.component.ts
您可以使用 getBoundingClientRect()
找到悬停元素的确切位置并将这些值设置为您的弹出窗口。请在下面找到演示。