mouseenter与mouseover的异同? 要说清楚mouseenter与mouseover有什么不同,也许可以从两方面去讲。 再看看官网对mouseenter的解释 mouseenter | onmouseenter event The event fires only if the mouse pointer is outside 大概意思是:和mouseover不同的是,mouseenter不支持事件冒泡 (英语比较渣,凑合看哈) 由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseover 我们给左右两边的ul分别添加了mouseover和mouseenter事件,当鼠标进入左右两边的ul时,mouseover和mouseenter事件都触发了,但是当移入各自的子元素li的时候,触发了左边 造成以上现象本质上是mouseenter事件不支持冒泡所致。 如何模拟mouseenter事件。
mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发 mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡
1.mouseenter 和mouseover的区别 当鼠标移动到元素上时就会触发mouseenter 事件 类似 mouseover,它们两者之间的差别是 mouseover 鼠标经过自身盒子会触发 mouseenter 只会经过自身盒子触发 之所以这样,就是因为mouseenter不会冒泡 跟mouseenter搭配鼠标离开 mouseleave 同样不会冒泡 <script> father = document.querySelector(".father"); var son = document.querySelector(".son"); // 1. mouseenter father.addEventListener("mouseenter", function () { console.log(11); }); /
在IE的全系列中都实现了mouseenter和mouseleave事件,但是在早期的w3c浏览器中却没有实现这两个事件。 有时候,我们需要使用 mouseenter事件来防止子元素的冒泡,这就涉及到事件兼容性的问题了。 先比较mouseenter和mouseover的异同点,当从元素外围进入元素内部时同时触发mouseover和mouseenter事件,但是在元素内部, 鼠标进入元素子节点时会继续触发mouseover 事件,该事件是可以向上冒泡的;对于mouseenter则不会冒泡,当然也不会触发该事件。 用mouseover来模拟mouseenter的关键在于利用事件的relatedTarget判定鼠标是否在元素内部移动,这也涉及到dom元素contain() 的实现。
--more--> mouseenter与mouseover的异同? 要说清楚mouseenter与mouseover有什么不同,也许可以从两方面去讲。 再看看官网对mouseenter的解释 mouseenter | onmouseenter event.aspx) The event fires only if the mouse pointer ,凑合看哈) 由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件,但是却不会触发mouseenter和mouseleave事件 我们给左右两边的ul分别添加了mouseover和mouseenter事件,当鼠标进入左右两边的ul时,mouseover和mouseenter事件都触发了,但是当移入各自的子元素li的时候,触发了左边 造成以上现象本质上是mouseenter事件不支持冒泡所致。 如何模拟mouseenter事件。
mouseenter() 鼠标进入(进入子元素不触发) 上面两个事件都是具备事件冒泡的特性,看看这个有没有,如下: ? ? 测试发现,mouseenter()这个事件,移动到子元素#small div也是会被触发的。 那么如果重叠起来,子元素进入会不会触发呢? ? 当子元素在父元素内部的时候,mouseenter()就只会触发一次而已。也就是刚刚进入父元素#big div的时候触发,再进入#small div的时候就不会触发了。 mouseleave() 鼠标离开(离开子元素不触发) 相信这个mouseleave()也是一样的特性,跟mouseenter()差不多才对,下面来看看。 ? ? hover() 同时为mouseenter和mouseleave事件指定处理函数 这个hover()方法其实就是mouseenter()和mouseleave()的合并方法,如下: ? ?
--more--> mouseenter与mouseover的异同? 要说清楚mouseenter与mouseover有什么不同,也许可以从两方面去讲。 再看看官网对mouseenter的解释 mouseenter | onmouseenter event.aspx) The event fires only if the mouse pointer ,凑合看哈) 由于mouseenter不支持事件冒泡,导致在一个元素的子元素上进入或离开的时候会触发其mouseover和mouseout事件,但是却不会触发mouseenter和mouseleave事件 我们给左右两边的ul分别添加了mouseover和mouseenter事件,当鼠标进入左右两边的ul时,mouseover和mouseenter事件都触发了,但是当移入各自的子元素li的时候,触发了左边 造成以上现象本质上是mouseenter事件不支持冒泡所致。 如何模拟mouseenter事件。
四、为元素绑定事件 1、方式一:(事件名) 语法: 元素.事件名(事件处理函数); 示例: // 绑定鼠标进入,离开,点击事件 $("#btn").mouseenter(function () { console.log("mouseenter"); }); $("#btn").mouseleave(function () { console.log (function () { console.log("mouseenter"); }).mouseleave(function () { console.log ", function () { console.log("bind:mouseenter"); }).bind("mouseleave", function () { ": function () { console.log("bind-obj:mouseenter"); }, "mouseleave": function ()
mouseenter:当鼠标位于元素上时触发 mouseenter 事件,通常与 mouseleave 配合使用。mousemove:鼠标在元素上移动时触发 moudemove 事件。 mouseenter/mouseovermouseover(鼠标覆盖):当鼠标移入元素或其子元素都会触发事件,所以有一个重复触发,冒泡过程。 (想要阻止mouseover的冒泡事件就用mouseenter)mouseenter/mouseover共同点:当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.总结就是 :mouseover和mouseenter的异同体现在两个方面:是否支持冒泡事件的触发时机可见mouseover事件因其具有冒泡的性质,在子元素内移动的时候,频繁被触发,如果我们不希望如此,可以使用mouseenter 结合其对称事件, mouseleave, mouseenter DOM事件的行为方式与CSS :hover 伪类非常相似。还有就是:mouseover先触发,mouseenter 后触发。
出现的bug 在别的地方调用table.reload()方法刷新表格数据后,提示框不显示,但是在F12中查看该DOM元素的属性,lay-tips属性还在,大概加估计,猜测是失去了绑定的mouseenter 三、出现bug的原实现方式 原来是在table所在的页面初始化时,通过table.render()创建表格,同时设置给表格中表头的lay-tips添加绑定mouseenter事件,鼠标移动进入时可弹窗提示框 ()方法刷新表格时,没有再给表头绑定mouseenter事件,导致不弹出提示框。 四、解决办法 首先想到的解决办法是在表格刷新时,再调用一次绑定mouseenter事件的方法,但是这样可能会造成重复绑定,尤其是页面使用了tab控件包括多个table的时候,容易重复添加 最后发现只需要在表格渲染table.render()之后的done()方法里进行绑定mouseenter事件就可以了。
常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数: 实例 $("p").dblclick(function(){ $(this).hide(); }); mouseenter () 当鼠标指针穿过元素时,会发生 mouseenter 事件。 mouseenter() 方法触发 mouseenter 事件,或规定当发生 mouseenter 事件时运行的函数: $("#p1").mouseenter(function(){ alert
mouseenter:当鼠标位于元素上时触发 mouseenter 事件,通常与 mouseleave 配合使用。 mousemove:鼠标在元素上移动时触发 moudemove 事件。 mouseup 和 mousedown 没什么好解释的,主要说一下 mouseover 和 mouseenter ; mouseout 和 mouseleave 的区别。 three">
mouseover
mouseover
mouseover
mouseenter
mouseenter
mouseenter
mousemove
< 打印结果如下图, mouseover 和 mouseout 在包含子元素的情况下会多次触发,mouseover 即使不包含子元素也会不断触发,mouseenter 在鼠标划入时触发一次,mouseleavemouseleave A 如果元素A内部嵌套了元素B,事件触发顺序见下表: Event Type Element Notes mousemove 移动到元素A mouseover A mouseenter A mousemove A Multiple mousemove events 移动到内嵌元素B mouseout A mouseover B mouseenter B mousemove 直接移动到元素C,常见于失去焦点再获得焦点的情况,事件触发顺序见下表: Event Type Element Notes mousemove 直接移动到元素C mouseover C mouseenter A mouseenter B mouseenter C mousemove C Multiple mousemove events 直接移出元素 C... mouseout C mouseleave 可以看到 mouseover/mouseout 事件只触发一次,mouseenter/mouseleave 事件触发了三次 然后再看下 click 元素 |Event Type|Notes| |--|-
-= item_MouseEnter; item.MouseLeave -= item_MouseLeave; } else dic.ContainsKey(item))//若是新添加的item,注册其相关事件 { item.MouseEnter += item_MouseEnter 即当item发生了什么时要做什么事,本例当然是当item发生MouseEnter和MouseLeave时,要做一些事,所以得注册item的这俩事件。 dic.ContainsKey(item)) { item.MouseEnter += item_MouseEnter; dic.ContainsKey(item)) { item.MouseEnter += item_MouseEnter;
例如,如果有一个嵌套的DOM结构
lbl.Tag = item; lbl.Click += new EventHandler(lbl_Click); lbl.MouseEnter += new EventHandler(lbl_MouseEnter); lbl.MouseLeave += new EventHandler(lbl_MouseLeave lbl.ForeColor = btnRoomType.ForeColor; } #endregion #region lbl_MouseEnter void lbl_MouseEnter(object sender, EventArgs e) { Label lbl = sender as
v-on也可以绑定多个事件 多个事件可以单独多个v-on绑定 v-on也可以绑定多个事件 多个事件可以单独多个v-on绑定
实现效果与原理 我们希望实现鼠标移动至树型结构的结点上就显示按钮,移出就隐藏按钮 实现原理:是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果,再配合v-show "id" :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter ="mouseenter(data)" @mouseleave="mouseleave(data)"> {{ node.label }} label: 'label' }, data: JSON.parse(JSON.stringify(data)) } }, methods: { mouseenter
实现效果与原理 我们希望实现鼠标移动至树型结构的结点上就显示按钮,移出就隐藏按钮 实现原理:是通过@mouseenter 和 @mouseleave两个属性来控制鼠标hover的效果,再配合v-show "id" :expand-on-click-node="false"> <span class="custom-tree-node" slot-scope="{ node, data }" @mouseenter ="mouseenter(data)" @mouseleave="mouseleave(data)"> {{ node.label }} label: 'label' }, data: JSON.parse(JSON.stringify(data)) } }, methods: { mouseenter
3 dbclick()双击事件 4 mousedown() /mouseup() 鼠标按下和松开事件 5 mouseover()/mouseout() 鼠标移入和移出事件 6 mouseenter ()/mouseleave() 鼠标移入移出事件 //mouseover()/mouseout()和mouseenter()/mouseleave()的区别 首先来了解一下事件冒泡和捕获 事件冒泡:内部事件先触发,然后在触发外部事件 事件捕获:外部事件先被触发,然后在触发内部元素 mouseover()/mouseout() :鼠标移入“所选元素以及后代都会触发” mouseenter
mouseover事件 次
mouseenter $('#num1').text(count1+=1) //通过记录次数来看出区别,无论移入哪个元素都会加1 }) $('.div1').mouseenter