jQuery中阻止hover事件冒泡

文章目录

jQuery中阻止hover事件冒泡
前言
- 冒泡示例
- 冒泡效果
- 阻止冒泡
- 阻止冒泡效果
总结

前言

给子元素设置hover样式后，通过鼠标的移入、移出触发子元素的hover事件。此时如果子元素的父元素甚至祖辈元素同样存在hover事件，在执行完子元素的hover事件之后会层层向上触发父辈元素的hover事件。这就是hover事件的冒泡现象。

冒泡示例

<div class="wrap"><div class="box"><div class="child1 child">我是容器中的第一个子元素</div><div class="child2 child">我是容器中的第二个子元素</div></div></div>
$default-width:200px;
$default-height:200px;
$redColor:red;
$border:1px solid black;
*{margin: 0;padding: 0;
}
.wrap{width: 100%;background-color: yellow;height: 600px;border: $border;&:hover{background-color: $redColor;}.box{width: 80%;margin: 0 auto;height: 400px;background-color: green;display: flex;border: $border;&:hover{background-color: $redColor;}.child1{width: $default-width;height: $default-height;background-color: lightblue;border: $border;&:hover{background-color: $redColor;}}.child2{width: $default-width;height: $default-height;border: $border;background-color: rgb(114, 40, 129);&:hover{background-color: $redColor;}}}
}

冒泡效果

页面加载默认效果

鼠标悬浮在第一个子元素上面，它的父级和祖先的hover事件同样被触发

阻止冒泡

solution1

    $("div").hover(function(event){var event=event || document.event;event.stopPropagation()$(this).addClass(" selected");    },function(event){var event=event || document.event;event.stopPropagation()$(this).removeClass(" selected")})

solution2

      $("div").hover(function(event){if(event.target== this){$(this).addClass(" selected");}},function(event){if(event.target== this){$(this).removeClass(" selected")}})

阻止冒泡效果

阻止冒泡之后，鼠标悬浮第一个子元素，只会触发子元素的hover事件。

总结

hover事件是由mouseenter和mouseleave共同构成的。

jQuery中阻止hover事件冒泡相关推荐

jQuery中的hover事件
在我们之前学习前端的过程中了解到了很多代码的作用,特别是js中所使用的方法,我之前也介绍过很多实用的js方法,今天要给大家介绍的是jQuery中的一个比较特殊的一个方法:hover(). 先前说过,我 ...
jQuery中的ajax、jquery中ajax全局事件、load实现页面无刷新局部加载、ajax跨域请求jsonp、利用formData对象向服务端异步发送二进制数据，表单序列化（异步获取表单内容）
jQuery中使用ajax: 在jQuery中使用ajax首先需要引入jQuery包,其引入方式可以采用网络资源,也可以下载包到项目文件中,这里推荐下载包到文件中:市面上有多个版本的jQuery库,这 ...
jQuery中的hover()方法
jQuery中的hover()方法用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数(enter),当光标移出这个元素时,会触发指定的第二个函数(leave).如下面一段代码: < ...
javascript中的onpropertychange事件与 jquery中的propertychange事件
2019独角兽企业重金招聘Python工程师标准>>> jquery 中的propertychange事件不兼容IE9 而javascript中的onpropertychange事 ...
html中绑定hover事件,jQuery中多个元素的Hover事件解决方案
1.需求简介 jQuery的hover事件只是针对单个HTML元素,例如: $('#login').hover(fun2, fun2); 当鼠标进入#login元素时调用fun1函数,离开时则调用fu ...
阻止JavaScript事件冒泡到父元素
前言略问题有代码如下: <div class='preview_image_container'><div onclick='details(th ...
javascript 停止事件冒泡以及阻止默认事件冒泡
停止事件冒泡 function stopBubble(e) {// 如果提供了事件对象,则这是一个非IE浏览器if ( e && e.stopPropagation ) {// 因此它 ...
JS标签中阻止默认事件的发生
若html标签中定义了两个事件(包含一个自定义函数),那么系统会先执行用户自定义的函数,然后执行标签默认函数.如果想要在执行完自定义函数之后阻止系统默认函数的执行,可以进行如下设置: 因为html标签 ...
深入了解jquery中的键盘事件
很多时候,我们需要获取用户的键盘事件,下面就一起来看看jquery是如何操作键盘事件的. 一.首先需要知道的是: 1.keydown() keydown事件会在键盘按下时触发. 2.keyup() k ...

jQuery中阻止hover事件冒泡

这里写自定义目录标题

jQuery中阻止hover事件冒泡

文章目录

前言

冒泡示例

冒泡效果

阻止冒泡

阻止冒泡效果

总结

jQuery中阻止hover事件冒泡相关推荐

最新文章

热门文章