使用mouseenter和mouseleave的jquery映射问题 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

jQuery 事件

jQuery 是为事件处理特别设计的。 ---- 什么是事件？页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。实例：在元素上移动鼠标。...选取单选按钮点击元素在事件中经常使用术语"触发"（或"激发"）例如： "当您按下按键时触发 keypress 事件"。...keyup focus scroll mouseleave blur unload hover jQuery 事件方法语法在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery...mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数： $("#p1").mouseenter(function(){ alert...mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数： $("#p1").mouseleave(function(){ alert

3.1K5 0

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

mouseenter：当鼠标位于元素上时触发 mouseenter 事件，通常与 mouseleave 配合使用。 mousemove：鼠标在元素上移动时触发 moudemove 事件。...mouseup 和 mousedown 没什么好解释的，主要说一下 mouseover 和 mouseenter ； mouseout 和 mouseleave 的区别。...其实如果是一个单独的元素，也并看不出什么问题，而且我们也常用 mouseover 和 mouseout 组合。...原来这两个组合是由区别的，一个单独的元素时效果几乎是一样的，问题就在于它们的子元素。...打印结果如下图， mouseover 和 mouseout 在包含子元素的情况下会多次触发，mouseover 即使不包含子元素也会不断触发，mouseenter 在鼠标划入时触发一次，mouseleave

3.3K0 0

您找到你想要的搜索结果了吗？

是的

没有找到

从零开始学 Web 之 jQuery（五）操作元素其他属性，为元素绑定事件

2、方法二元素.width(属性值或者数字); 元素.height(属性值或者数字); 1、jQuery中用以上方式可以获取和设置元素的宽高。 2、当没有参数的时候是获取元素的宽高属性。...和top 1、方法一元素.css("left"); 元素.css("left"); 2、方法二 // 元素的left和top获取元素.offset(); // 元素的left和top设置元素.offset...3、这里的 top 是包括：top 的值和 margin-top 值之和。 4、在设置的时候，left 和 top 的值是数字，没有 px。...$("#btn").mouseenter(function () { console.log("mouseenter"); }).mouseleave(function ()...("bind-obj:click"); } }); 使用 bind 对象的方式，只需要一个bind，可以绑定多个事件。

8664 0

4-Jquery学习四-事件操作

'); //为n5绑定mouseenter mouseleave两个事件，并为其传入附加数据obj // 附加数据可以是任意类型 $("#n5").bind("mouseenter mouseleave...即使是执行live()函数之后新添加的元素，只要它匹配当前jQuery对象的选择器，绑定的事件处理函数仍然对其有效。要删除通过live()绑定的事件，请使用die()函数。...jQuery 1.3 新增该函数，从jQuery 1.7开始被标记为已过时，在jQuery 1.9中被移除,请使用on()函数来替代。请使用on()函数来替代。 5，die 同上。...mouseleave两个事件，并为其传入附加数据data //附加数据可以是任意类型 $("body").delegate("#n5", "mouseenter mouseleave", data,...触发resize事件时，jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。要删除通过resize()绑定的事件，请使用unbind()函数。

5.4K9 0

JQ事件和事件对象

() 鼠标按下和松开事件 5 mouseover（）/mouseout() 鼠标移入和移出事件 6 mouseenter（）/mouseleave() 鼠标移入移出事件 //mouseover...()/mouseout()和mouseenter（）/mouseleave()的区别首先来了解一下事件冒泡和捕获事件冒泡：内部事件先触发，然后在触发外部事件事件捕获：外部事件先被触发...，然后在触发内部元素 mouseover（）/mouseout() ：鼠标移入“所选元素以及后代都会触发” mouseenter（）/mouseleave()：鼠标移入“所选元素”才会触发...在mousedown、mouseup事件中，event.which属性返回的是对应鼠标按钮的映射代码值（相当于event.button）。...以下是主要的鼠标按钮映射代码对应表 Event.which属性值对应的鼠标按钮 1 鼠标左健 2 鼠标中健（滚轮键） 3 鼠标右健 6 event.preventDefault() 阻止事件的默认行为

5.3K2 0

导航菜单优化制作

; padding-left: 20px; display: none; cursor: pointer; } js我使用了构造函数进行封装...，这样可以有效的避免js中命名重复的问题，并且修改起来很方便，不需要在HTML中加入许多id，代码简洁了不少： function navList(id){ var dad=...事件写入构造函数中就ok了，但在其中遇到了问题： for(var i=0;i<fucaidan.length;i++){ fucaidan[i].addEventListener('mouseenter...zicaidan[i].style.display='block'; this.style.backgroundColor='#999'; }); 我们知道，for循环的便利在上面的函数中并不是我们所想的那样...那么该如何解决这个问题呢？

4.7K7 0

jQuery：详解jQuery中的事件（二）

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。　　...接上篇jQuery：详解jQuery中的事件（一）　　3、合成事件　　jQuery有两个合成事件——hover()方法和toggle()方法，同ready()方法一样，这些都是jQuery自定义的方法...*这里要注意的一点是，jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover"...简单的说，mouseover和mouseout会引起触发的区域更大，mouseenter和mouseleave只能针对绑定的元素来触发。　　...就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的click事件，所以需要对事件作用范围进行限制。　　jQuery有三种办法可以解决事件冒泡导致的问题。

3.6K3 0

jQuery 事件

注意：自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。...该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。提示：如需移除事件处理程序，请使用Off()方法。...jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。...自 jQuery 版本 1.7 起，off() 方法是 unbind()、die() 和 undelegate() 方法的新的替代品。...(function(){ $("#result").val("mouseenter"); }).mouseleave(function(){ $("#result

3.9K7 0

JQuery之内置函数响应事件

2.mouseenter 当鼠标指针穿过元素时，会发生 mouseenter 事件。该事件大多数时候会与mouseleave 事件一起使用。...3.mouseleave 当鼠标指针离开元素时，会发生 mouseleave 事件。该事件大多数时候会与mouseenter 事件一起使用。...该事件大多数时候会与 mouseout 事件一起使用。注释：与 mouseenter 事件不同，不论鼠标指针穿过被选元素或其子元素，都会触发 mouseover 事件。...在很短的时间内发生两次 click，即是一次 double click 事件。提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。...如果想要再继续深入学习每个函数的具体用法，可以参考JQuery中的官方API。里面介绍都很详细，我这里就不多介绍了。如对内容有问题或有疑义，请及时提出，不甚感谢。本人QQ：208017534

2.9K6 0

第79天：jQuery事件总结（二）

上一篇讲到jQuery中的事件，深入学习了加载DOM和事件绑定的相关知识，这篇主要深入讨论jQuery事件中的合成事件、事件冒泡和事件移除等内容。　　...一、合成事件 jQuery有两个合成事件——hover()方法和toggle()方法，同ready()方法一样，这些都是jQuery自定义的方法。　　...*这里要注意的一点是，jQuery的hover()方法准确来说是替代jQUery中的bind("mouseenter")和bind("mouseleave")，而不是替代bind("mouseover"...简单的说，mouseover和mouseout会引起触发的区域更大，mouseenter和mouseleave只能针对绑定的元素来触发。　　...就上面的简单描述，已经可以看出问题所在了，那就是会出现意想不到的click事件，所以需要对事件作用范围进行限制。　　jQuery有三种办法可以解决事件冒泡导致的问题。

2.4K2 0

导航菜单优化制作

; padding-left: 20px; display: none; cursor: pointer; } js我使用了构造函数进行封装...，这样可以有效的避免js中命名重复的问题，并且修改起来很方便，不需要在HTML中加入许多id，代码简洁了不少： function navList(id){ var dad=...事件写入构造函数中就ok了，但在其中遇到了问题： for(var i=0;i<fucaidan.length;i++){ fucaidan[i].addEventListener('mouseenter...zicaidan[i].style.display='block'; this.style.backgroundColor='#999'; }); 我们知道，for循环的便利在上面的函数中并不是我们所想的那样...那么该如何解决这个问题呢？

3.7K1 0

Web前端JQuery入门实战案例

动画(animation)，ajax，DOM，更简单，容易使用的api。...jquery api 文档开发环境，测试环境，生产环境 git svn $(function(){ // 写jquery入口函数的第二种方法 }); jq对象和Dom对象 ...选择器是jquery提供的一组方法，用来方便我们找页面中的元素，jquery选择器返回的是jquery对象。...简单的事件绑定，bind事件绑定，delegate事件绑定，on事件绑定 click(handler) mouseenter(handler) mouseleave(handler) $("#btn"...(function(){ }); 只有jquery拿到控制权，才能释放 val() text() 和 html() width height scrollTop scrollLeft offset

4.4K1 0

jQuery对象操作

doctype html> 对象操作的使用...jquery-1.8.3.min.js"> // 加载图片 <img src=...//2.定事件,确定在对象上面的操作 //3.匿名函数,在事件里面包含的匿名函数,jQuery或其他前端框架的特点 //三步:找对象(找...mouseleave() 当鼠标指针离开元素时，会发生 mouseleave 事件。...mouseenter() 当鼠标指针穿过元素时，会发生 mouseenter 事件，该事件大多数时候会与 mouseleave 事件一起使用。

1.8K3 1

JQuery中bind和unbind函数

JQuery中bind和unbind函数测试：页面代码： mouseleave、change、select、submit、keydown、keypress、keyup和error等，当然也可以是自定义名称。...(); 例2：删除p的click事件 $("p").unbind("click"); 例2：删除p元素click事件后出发的test函数和添加p元素click事件后触发的test函数 $("...，如果想要点击链接但是不触发div的点击事件，需要在触发链接的时候把div的点击事件禁用，这里我用到链接mouseenter事件是unbind删除div的事件。...(function(){ $(".test").unbind(); //删除.test的所有事件 }); $(".test a").mouseleave(function(){ $(".test").bind

1.6K2 0

从零开始学 Web 之 jQuery（二）获取和操作元素的属性

一、jQuery获取和操作元素属性 DOM中有很多方式获取元素，比如通过id，通过标签名，通过类名，通过name的值，通过选择器等方式。...this.value = "改变按钮"; // 是DOM的写法，没问题。 PS：jQuery 中使用 jQuery对象.val("内容") 来设置表单标签的 value 属性。...PS：jQuery中使用 jQuery对象.css("属性":"值"); 的方式设置标签的样式。 4、并集选择器语法：$("div,p,span")，中间使用逗号隔开。...中鼠标进入事件是：mouseenter；鼠标离开事件是：mouseleave 2、css 中的 display:none|block 对应的隐藏和显示在 jQuery 中可以使用方法：show() 和...表示的显示和隐藏的动画效果。 4、stop 方法表示在显示和隐藏之前先清除之前的动画效果，防止鼠标操作过快，动画的显示跟不上操作。 10、过滤选择器这类选择器都带有冒号。

2.3K4 0

下拉菜单;手风琴;九宫格的Jquery的使用实例

下拉菜单;手风琴;九宫格的Jquery的使用实例 1.下拉菜单效果如图: 下拉.gif 代码如下: jquery-1.9.1/jquery-1.9.1/jquery.js"> li{ width: 80px;...ul> $(function () { var $li = $("ul > li ul"); $li.hide(); $(".outUl>li.out").mouseenter...(function () { $(this).children().show(500); }); $(".outUl>li.out").mouseleave(function...blue"> $(function () { $(".container>div").mouseenter

2.1K2 0

jQuery第三十篇移入移出事件

/jquery-1.10.1.min.js"> /* mouseover/mouseout事件..., 子元素被移入移出也会触发父元素的事件 */ $(function() { /* $(".father").mouseover(.../mouseleave事件, 子元素被移入移出不会触发父元素的事件推荐大家使用 */ /*$(".father...").mouseenter(function () { console.log("father被移入了"); }); $(...".father").mouseleave(function () { console.log("father被移出了"); });*/

8181 0

jquery鼠标事件

.hover() 　　将两个时间函数绑定到匹配元素上，分别当鼠标指针进入和离开元素时被被执行。　　...，　　　　解除绑定上面的例子中使用: 　　　　$("td").unbind('mouseenter mouseleave'); .mousedown() 　　当鼠标按下的时候绑定的事件处理函数....mouseenter( [eventData ], handler(eventObject) ) 　　　　eventData 　　　　　　一个对象，它包含的数据键值对映射将被传递给事件处理程序....mouseleave() 　　当鼠标指针离开元素时候触发的事件。　　....mouseleave( [eventData ], handler(eventObject) ) 　　　　eventData 　　　　　　一个对象，它包含的数据键值对映射将被传递给事件处理程序

6.5K7 0

jquery 绑定事件 - resize() 浏览器窗口的大小发生改变

事件函数列表 blur() 元素失去焦点 focus() 元素获得焦点 click() 鼠标单击 mouseover() 鼠标进入（进入子元素也触发） mouseout() 鼠标离开（离开子元素也触发） mouseenter...() 鼠标进入（进入子元素不触发） mouseleave() 鼠标离开（离开子元素不触发） hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成...resize() 浏览器窗口的大小发生改变 scroll() 滚动条的位置发生变化 submit() 用户递交表单 resize() 浏览器窗口的大小发生改变其实大部分resize()方法是用于响应式布局调整屏幕大小的时候进行触发处理的...html> jquery.../jquery-3.3.1.min.js"> $(function(){

3.1K2 0

JQuery第一节

获取元素的方法太少且长，麻烦。 //2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。 //3. 注册的事件会覆盖。 //4. 有兼容性问题。 //5....获取元素的方式非常的简单，而且非常的丰富 //2. jQuery的隐式迭代特性，不再需要书写for循环语句。 //3. 使用jQuery完全不用考虑兼容性问题。...+mouseleave //【案例：突出展示】siblings+find //【案例：手风琴】next+parent //【案例：淘宝精品】index+eq 其他补充 mouseover与mouseenter...mouseover和mouseoverenter都有鼠标经过的意思，但是在注册鼠标经过事件的时候，推荐使用mouseenter mouseenter 与 mouseover 的不同 mouseover...mouseenter与mouseleave是一对事件，只有当鼠标经过当前元素时，事件会触发，鼠标经过子元素，mousenter事件是不会触发的。

2.1K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭