首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

防止Mootools Mouseenter触发隐藏的子元素

防止Mootools Mouseenter触发隐藏的子元素,可以通过以下方法实现:

  1. 使用mouseenter事件的relatedTarget属性来判断鼠标指针是否从子元素移动到了当前元素。
代码语言:javascript
复制
element.addEvent('mouseenter', function(event) {
    var relatedTarget = event.relatedTarget;
    if (this.contains(relatedTarget)) {
        return;
    }
    // 在这里执行你的代码
});
  1. 使用mouseover事件代替mouseenter事件,并在事件处理函数中判断event.target是否为当前元素。
代码语言:javascript
复制
element.addEvent('mouseover', function(event) {
    if (event.target === this) {
        // 在这里执行你的代码
    }
});
  1. 使用CSS属性pointer-events来禁用子元素的鼠标事件。
代码语言:css
复制
.parent-element {
    pointer-events: none;
}
.parent-element * {
    pointer-events: all;
}

在这个例子中,.parent-element是你想要添加mouseenter事件的元素,而它的子元素将不会触发任何鼠标事件。通过这种方式,你可以防止mouseenter事件在隐藏的子元素上触发。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • JQuery几个mouse事件区别和用法

    mouseenter:当鼠标位于元素上时触发 mouseenter 事件,通常与 mouseleave 配合使用。 mousemove:鼠标在元素上移动时触发 moudemove 事件。...但是今天在写一个QQ在线客服插件时出现了问题,我写了一个 0.3秒 动画效果,鼠标划入显示,划出隐藏,鼠标在上面移动时,插件不停地显示隐藏好多次。...原来这两个组合是由区别的,一个单独元素时效果几乎是一样,问题就在于它们元素。...mouseover 和 mouseout 鼠标划入元素,再次划入父元素时即再次触发,如果该元素包含元素,鼠标在上面划动时即会触发多次。...打印结果如下图, mouseover 和 mouseout 在包含元素情况下会多次触发,mouseover 即使不包含元素也会不断触发mouseenter 在鼠标划入时触发一次,mouseleave

    2.6K00

    JQuery之内置函数响应事件

    与 mouseover 事件不同,只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。如果鼠标指针穿过任何元素,同样会触发 mouseover 事件。...与 mouseout 事件不同,只有在鼠标指针离开被选元素时,才会触发 mouseleave 事件。如果鼠标指针离开任何元素,同样会触发 mouseout 事件。...注释:与 mouseenter 事件不同,不论鼠标指针穿过被选元素或其元素,都会触发 mouseover 事件。只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。...这个函数会调用执行绑定到blur事件所有函数,包括浏览器默认行为。可以通过返回false来防止触发浏览器默认行为。...可以通过在某个绑定函数中返回false来防止触发浏览器默认行为。 四:其他事件: 1.scroll 当用户滚动指定元素时,会发生 scroll 事件。

    2.1K60

    ReactPortals传送门

    MouseEnter: 当鼠标光标进入一个元素触发,该事件仅在鼠标从元素外部进入时触发,不会对元素内部元素产生影响。...事件将被触发,而如果此时我们鼠标是从b元素移出到a元素内,不会触发MouseEnter事件。...避免重复触发: MouseOver和MouseOut事件在鼠标悬停在元素内部时会重复触发,当鼠标从一个元素移动到其元素时,MouseOut事件会在父元素触发一次,然后在元素触发一次,MouseOut...事件也是同样会多次触发,可以将父元素与所有元素都看作独立区域,而事件会冒泡到父元素来执行事件绑定函数,这可能导致重复事件处理和不必要逻辑触发,而MouseEnter和MouseLeave事件不会重复触发...portal元素,即使是在portal与child之间切换也可以利用clearDelayTimer来阻止元素隐藏,所以之后弹出层就可以利用这种方式递归处理就可以实现无限嵌套了。

    25150

    JQ事件和事件对象

    ()/mouseout()和mouseenter()/mouseleave()区别    首先来了解一下事件冒泡和捕获     事件冒泡:内部事件先触发,然后在触发外部事件     事件捕获:外部事件先被触发...,然后在触发内部元素     mouseover()/mouseout() :鼠标移入“所选元素以及后代都会触发”     mouseenter()/mouseleave():鼠标移入“所选元素”才会触发...  focusin可以在父元素上检测元素获得焦点情况 而focusout可以在父元素上检测元素失去焦点情况  四 其他事件   1 scroll()滚动滚动条时触发事件      2  resize...       2 event.target  触发该事件DOM元素        3  event.currentTarget 在事件冒泡阶段中的当前DOM元素,等同于 this         4...     7 event.stopPropagation()  防止冒泡事件

    4.1K20

    第79天:jQuery事件总结(二)

    解析如下:   mouseover与mouseenter   不论鼠标指针穿过被选元素或其元素,都会触发 mouseover 事件。   ...只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。   mouseout与mouseleave   不论鼠标指针离开被选元素还是任何元素,都会触发 mouseout 事件。   ...简单说,mouseover和mouseout会引起触发区域更大,mouseenter和mouseleave只能针对绑定元素触发。   ...上篇有过下面的一个例子,在其中如果要连续单击“标题”链接,实现“内容”隐藏和显示效果,那么按照之前做法就需要在绑定“click”事件时候判断当前“内容”部分是隐藏还是显示,然后进行相反操作,显然就麻烦多...那么在单击元素A时候,会依次触发三个click事件;单击元素B时候,会依次触发两个click事件。

    1.6K20

    jQuery:详解jQuery中事件(二)

    解析如下:   mouseover与mouseenter   不论鼠标指针穿过被选元素或其元素,都会触发 mouseover 事件。   ...只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件。   mouseout与mouseleave   不论鼠标指针离开被选元素还是任何元素,都会触发 mouseout 事件。   ...简单说,mouseover和mouseout会引起触发区域更大,mouseenter和mouseleave只能针对绑定元素触发。   ...上篇有过下面的一个例子,在其中如果要连续单击“标题”链接,实现“内容”隐藏和显示效果,那么按照之前做法就需要在绑定“click”事件时候判断当前“内容”部分是隐藏还是显示,然后进行相反操作,显然就麻烦多...那么在单击元素A时候,会依次触发三个click事件;单击元素B时候,会依次触发两个click事件。

    2.2K30

    jquery 绑定事件 - mouseover() mouseout() mouseenter() mouseleave() hover()

    mouseenter() 鼠标进入(进入元素触发) mouseleave() 鼠标离开(离开元素触发) hover() 同时为mouseenter和mouseleave事件指定处理函数 ready...果然,这个子元素也是会触发mouseout()事件mouseenter() 鼠标进入(进入元素触发) 上面两个事件都是具备事件冒泡特性,看看这个有没有,如下: ? ?...测试发现,mouseenter()这个事件,移动到元素#small div也是会被触发。 那么如果重叠起来,元素进入会不会触发呢? ?...当元素在父元素内部时候,mouseenter()就只会触发一次而已。也就是刚刚进入父元素#big div时候触发,再进入#small div时候就不会触发了。...mouseleave() 鼠标离开(离开元素触发) 相信这个mouseleave()也是一样特性,跟mouseenter()差不多才对,下面来看看。 ? ?

    2.9K30

    mouseenter与mouseover为何这般纠缠不清?

    大概意思是说:当鼠标从元素边界之外移入元素边界之内时,事件被触发。而当鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。(英语比较渣?...,凑合看哈) 由于mouseenter不支持事件冒泡,导致在一个元素元素上进入或离开时候会触发其mouseover和mouseout事件,但是却不会触发mouseenter和mouseleave事件...我们给左右两边ul分别添加了mouseover和mouseenter事件,当鼠标进入左右两边ul时,mouseover和mouseenter事件都触发了,但是当移入各自元素li时候,触发了左边...可见mouseover事件因其具有冒泡性质,在元素内移动时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之,但是早期只有ie浏览器支持该事件,虽然现在大多数高级浏览器都支持了...ul元素wrap(移入ul时,此时也是触发mouseenter事件时候, 其实不一定,后面会说明), 或者ul元素本身(在其元素上移出时), 又或者是元素本身(直接从子元素A移动到元素B)。

    1.7K70

    面试官:mouseenter与mouseover有何异同?怎么模拟mouseenter

    大概意思是说:当鼠标从元素边界之外移入元素边界之内时,事件被触发。而当鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。...大概意思是:和mouseover不同是,mouseenter不支持事件冒泡 (英语比较渣,凑合看哈) 由于mouseenter不支持事件冒泡,导致在一个元素元素上进入或离开时候会触发其mouseover...我们给左右两边ul分别添加了mouseover和mouseenter事件,当鼠标进入左右两边ul时,mouseover和mouseenter事件都触发了,但是当移入各自元素li时候,触发了左边...可见mouseover事件因其具有冒泡性质,在元素内移动时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之,但是早期只有ie浏览器支持该事件,虽然现在大多数高级浏览器都支持了...,也不是目标元素元素,就说明鼠标已移出目标元素 我们同样可以用上面封装函数完成 // callback表示如果执行mouseenter事件时传入回调函数 let emulateEnterOrLeave

    1.1K30

    JavaScript鼠标事件细讲:执行顺序+注意事项+区别比对

    mouseenter/mouseovermouseover(鼠标覆盖):当鼠标移入元素或其元素都会触发事件,所以有一个重复触发,冒泡过程。...对应移除事件是mouseoutmouseenter(鼠标进入):当鼠标移入元素本身(不包含元素元素)会触发事件,也就是不会冒泡,对应移除事件是mouseleavemouseenter/mouseover...区别点:mouseenter不会冒泡,简单说,它不会被它本身元素状态影响到.mouseover就会被它元素影响到,在触发元素时候,mouseover会冒泡触发元素....(想要阻止mouseover冒泡事件就用mouseenter)mouseenter/mouseover共同点:当二者都没有元素时,二者行为是一致,但是二者内部都包含元素时,行为就不同了.总结就是...:mouseover和mouseenter异同体现在两个方面:是否支持冒泡事件触发时机可见mouseover事件因其具有冒泡性质,在元素内移动时候,频繁被触发,如果我们不希望如此,可以使用mouseenter

    3.6K21

    mouseenter与mouseover为何这般纠缠不清?

    大概意思是说:当鼠标从元素边界之外移入元素边界之内时,事件被触发。而当鼠标本身在元素边界内时,要触发该事件,必须先将鼠标移出元素边界外,再次移入才能触发。(英语比较渣?...,凑合看哈) 由于mouseenter不支持事件冒泡,导致在一个元素元素上进入或离开时候会触发其mouseover和mouseout事件,但是却不会触发mouseenter和mouseleave事件...我们给左右两边ul分别添加了mouseover和mouseenter事件,当鼠标进入左右两边ul时,mouseover和mouseenter事件都触发了,但是当移入各自元素li时候,触发了左边...可见mouseover事件因其具有冒泡性质,在元素内移动时候,频繁被触发,如果我们不希望如此,可以使用mouseenter事件代替之,但是早期只有ie浏览器支持该事件,虽然现在大多数高级浏览器都支持了...,也不是目标元素元素,就说明鼠标已移出目标元素 我们同样可以用上面封装函数完成 // callback表示如果执行mouseenter事件时传入回调函数 let emulateEnterOrLeave

    76310

    jQuery(事件和动画-基础事件、复合事件)

    ,不同点:mourseover无论鼠标移入被选元素 还是被选元素元素都会触发。...mourseenter只有移入被选元素才会触发; mourseout和mourseleave都是鼠标移除元素触发。不同点:mourseout在移除被选元素元素 时也会被触发。...复合事件 显示与隐藏 show show(speed|function); 作用:将隐藏元素变为可见(将display:none-->display:block),从左上角开始显示。...function是回调函数,当目标 元素全部显示完成后触发。 代码参考上述例子。 slideUp slideUp(speed|function); 通过调整高度来隐藏元素; 与上一个正好相反。...这是一 个自定义方法,它为频繁使用任务提供了一种“保持在其中”状态。 当鼠标移动到一个匹配元素上面时,会触发指定第一个函数。 当鼠标移出这个元素时,会触发 指定第二个函数。

    1.4K10

    JavaWeb18-jquery学习笔记(Java全栈开发)

    :判断元素是否含有特定样式 filter(...):筛选出与指定表达式匹配元素集合 is(...):判断元素是否符合指定选择器 has(...):含有特定后代元素 not(...)...可以在父元素上检测元素获取焦点情况 blur和focusout 失去焦点 <script type="text/javascript" src=".....移进 mouseover , 如果鼠标指针穿过任何<em>子</em><em>元素</em>,同样会<em>触发</em> mouseover 事件 <em>mouseenter</em> ,如果鼠标指针穿过任何<em>子</em><em>元素</em>,不会<em>触发</em> <em>mouseenter</em> 事件 mouseout...) triggerHandler() <em>触发</em>所有的事件(不包括浏览器默认<em>的</em>) 委派 live jQuery 给所有匹配<em>的</em><em>元素</em>附加一个事件处理函数,即使这个<em>元素</em>是以后再添加进来<em>的</em>也有效,例如给A标签添加事件...fn hide() <em>隐藏</em> toggle(speed [,fn]) 切换,如果<em>隐藏</em>就显示,如果显示就<em>隐藏</em>。

    6.8K90

    那些关于DOM常见Hook封装(二)

    来看该 hook 封装: 首先是 onChange 事件中,判断是否是全屏,从而触发进入全屏函数或者退出全屏函数。当退出全屏时候,卸载 change 事件。...主要实现原理是监听 mouseenter 触发 onEnter 事件,切换状态为 true,监听 mouseleave 触发 onLeave 事件,切换状态为 false。...先简单看下这个 API: Document.visibilityState (只读属性), 返回document可见性, 即当前可见元素上下文环境。...由此可以知道当前文档 (即为页面) 是在背后, 或是不可见隐藏标签页,或者 (正在) 预渲染。可用值如下: 'visible' : 此时页面内容至少是部分可见....典型用法是防止当页面正在渲染时加载资源,或者当页面在背景中或窗口最小化时禁止某些活动。

    87120
    领券