我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时,mouseout事件发生,但我不希望它发生,直到鼠标离开父元素,绝对div。
我如何防止mouseout事件从发射时,它击中一个子元素没有jquery。
我知道这与事件冒泡有关,但我没有找到如何解决这个问题的方法。
我在这里找到了一个类似的帖子:如何禁用由子元素触发的鼠标退出事件?
但是,该解决方案使用jQuery。
我在绝对定位的div中的onmouseout函数遇到了麻烦。当鼠标击中div中的子元素时,mouseout事件发生,但我不希望它发生,直到鼠标离开父元素,绝对div。
我如何防止mouseout事件从发射时,它击中一个子元素没有jquery。
我知道这与事件冒泡有关,但我没有找到如何解决这个问题的方法。
我在这里找到了一个类似的帖子:如何禁用由子元素触发的鼠标退出事件?
但是,该解决方案使用jQuery。
当前回答
在Angular 5、6和7上
<div (mouseout)="onMouseOut($event)"
(mouseenter)="onMouseEnter($event)"></div>
然后在
import {Component,Renderer2} from '@angular/core';
...
@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styleUrls: ['./test.component.scss']
})
export class TestComponent implements OnInit, OnDestroy {
...
public targetElement: HTMLElement;
constructor(private _renderer: Renderer2) {
}
ngOnInit(): void {
}
ngOnDestroy(): void {
//Maybe reset the targetElement
}
public onMouseEnter(event): void {
this.targetElement = event.target || event.srcElement;
console.log('Mouse Enter', this.targetElement);
}
public onMouseOut(event): void {
const elementRelated = event.toElement || event.relatedTarget;
if (this.targetElement.contains(elementRelated)) {
return;
}
console.log('Mouse Out');
}
}
其他回答
对于在大多数情况下都有效的更简单的纯CSS解决方案,可以通过将子指针事件设置为none来删除它们
.parent * {
pointer-events: none;
}
浏览器支持IE11+
感谢阿姆贾德·马萨德,他激励了我。
我有以下解决方案,似乎在IE9, FF和Chrome和代码很短(没有复杂的闭包和横向子东西):
DIV.onmouseout=function(e){
// check and loop relatedTarget.parentNode
// ignore event triggered mouse overing any child element or leaving itself
var obj=e.relatedTarget;
while(obj!=null){
if(obj==this){
return;
}
obj=obj.parentNode;
}
// now perform the actual action you want to do only when mouse is leaving the DIV
}
如果你添加(或拥有)一个CSS类或id到父元素,那么你可以这样做:
<div id="parent">
<div>
</div>
</div>
JavaScript:
document.getElementById("parent").onmouseout = function(e) {
e = e ? e : window.event //For IE
if(e.target.id == "parent") {
//Do your stuff
}
}
所以只有当事件在父div上时,才会执行东西。
我只是想和你分享一些东西。 我在ng-mouseenter和ng-mouseleave事件中遇到了一些困难。
案例分析:
我创建了一个浮动导航菜单,当光标在图标上时切换。 这个菜单在每一页的最上面。
为了处理菜单上的显示/隐藏,我切换了一个类。 ng-class = " {: vm.isHover} " 切换vm。isHover,我使用ng鼠标事件。 ng-mouseenter = " vm。isHover = true" ng-mouseleave = " vm。isHover = false"
目前,一切都很好,并按预期工作。 解决方法简单明了。
接下来的问题是:
在一个特定的视图中,我有一个元素列表。 当光标在列表元素上时,我添加了一个操作面板。 我使用与上面相同的代码来处理该行为。
存在的问题:
我发现当我的光标在浮动导航菜单上,也在一个元素的顶部,有一个相互冲突。 动作面板显示,浮动导航被隐藏。
问题是,即使光标在浮动导航菜单上,列表元素ng-mouseenter也会被触发。 这对我来说毫无意义,因为我认为鼠标传播事件会自动中断。 我必须说我很失望,我花了一些时间来找出那个问题。
第一个想法:
我试着用这些:
$ event.stopPropagation () $ event.stopImmediatePropagation ()
我结合了很多ng指针事件(mouemove, mouveover,…),但没有一个帮助我。
CSS解决方案:
我用一个简单的css属性找到了解决方案,我越来越多地使用它:
pointer-events: none;
基本上,我这样使用它(在我的列表元素上):
ng-style="{'pointer-events': vm.isHover ? 'none' : ''}"
有了这个棘手的,ng-mouse事件将不再被触发,我的浮动导航菜单将不再关闭自己,当光标在它和列表中的一个元素上时。
更进一步说:
正如你所期望的,这个解决方案可行,但我不喜欢它。 我们无法控制事态发展,这很糟糕。 另外,你必须有访问虚拟机的权限。实现这个目标是有可能的,可能是不可能的,但在某种程度上是肮脏的。 如果有人想看的话,我可以做一把小提琴。
然而,我没有其他的解决方案…… 说来话长,我不能给你土豆,所以请原谅我的朋友。 不管怎样,指针事件:没有是生命,所以记住它。
如果您可以访问mouseout方法中事件附加到的元素,则可以使用contains()查看事件是否。relatedTarget是否是子元素。
事件。relatedTarget是鼠标传递到的元素,如果它不是子元素,则您已经将鼠标移出了元素。
div.onmouseout = function (event) {
if (!div.contains(event.relatedTarget)) {
// moused out of div
}
}