vue mouseover事件,vue mouseenter

　　本文主要介绍了vue中鼠标滚轮事件的引入及其兼容性处理方法，有很好的参考价值，希望对大家有所帮助。如有错误或不足之处，请不吝赐教。

引入mousewheel事件及兼容性处理

　　在项目实施过程中，需要在带有垂直滚动条的表格中添加一个mousewheel事件，以便于查看数据；它的实现原理和我上一篇博客里的drag事件差不多，都是用同样的模拟滚动条实现的。

滚动条设置的要点在于

　　1.滚动条与滚动槽的高度比应等于内容区(动态变化)与可视区的高度比；滚动槽与可视区域平齐且高度相同；滚动条的高度与内容的高度成比例计算；

　　2.每个元素的定位采用绝对定位，其父元素采用相对定位，这样可以很好的设置样式；

　　布局样式完成后，只需要在组件方法中注册方法，元素到位后调用方法，mousewheel事件在方法内部；这里需要考虑兼容性。firefox不支持mousewheel事件，其对应的鼠标滚动事件是DOMMouseScroll事件，该事件只能通过DOM2级别(addEventListener)添加一个处理程序来处理；而且判断鼠标滚动方向的方式也不一样。firefoxt通过detail属性判断，向前滚动时是-3和3；其他浏览器传递wheelDelta属性，正向是120的倍数，反向是-120的倍数；

　　具体内容可参考《js高级程序设计》事件一章；添加函数如下：

　　滚动(){

　　this . wrap div=document . getelementbyid( wrap )；

　　this . content div=document . getelementbyid( context-table )；

　　this . content div 1=document . getelementbyid( context-table 1 )；

　　this . slider wrap=document . getelementbyid( slider wrap )；

　　this . slider=document . getelementbyid( slider )；

　　//设置比例

　　let scale=this . wrap div . client height/this . content div . client height；

　　if(标度1) {

　　this.mouseFlag=true

　　设h1=this . slider wrap . client height * scale；

　　h1=(h1 50)？50:h1；

　　this . slider . style . height=h1 px ；/*滚动条高度动态变化*/

　　设y=0；

　　让那个=这个；

　　//为firefox添加滚轮事件

　　if (document.addEventListener){

　　document . addevent listener( DOM mouse scroll ，函数(e) {

　　if(that.mouseFlag){

　　//console . log( scroll )；

　　设event 1=window . event e；

　　y=(event1.detail 0)？y 8:y-8；

　　y=(y 0)？0:y；

　　设max=that . slider wrap . client height-that . slider . client height；

　　y=(y max 1)？max 1:y；

　　that . slider . style . top=y px ；

　　scale=that . wrap div . client height/that . content div . client height；

　　设y1=-y/scale；

　　that . content div . style . top=y1 px ；

　　that . content div 1 . style . top=y1 px ；

　　}

　　}，假)

　　}

　　this . wrap div . onmousewheel=function(e){

　　if(标度1) {

　　设event 1=window . event e；

　　y=(event1.wheelDelta 0)？y 8:y-8；

　　y=(y 0)？0:y；/*限制滚动范围*/

　　设max=that . slider wrap . client height-that . slider . client height；

　　//console.log(scale，y，sliderWrap.clientHeight，slider . client height)；

　　y=(y max 1)？max 1:y；

　　that . slider . style . top=y px ；

　　scale=that . wrap div . client height/that . content div . client height；

　　设y1=-y/scale；

　　that . content div . style . top=y1 px ；

　　that . content div 1 . style . top=y1 px ；

　　}

　　Else{/*当内容区域的高度小于或等于可视区域时，移除绑定的事件和滚动条*/

　　this . wrap div . onmousewheel=null；

　　if(document.addEventListener){

　　this.mouseFlag=false

　　}

　　this . slider wrap . style . visibility= hidden ；

　　let height=this . content div . client height；

　　tableright . style . height=height 72 px ；

　　this . wrap div . style . height=height 2 px ；

　　}

　　此函数在取消绑定firefox绑定事件时遇到问题。因为removeEventListener()需要通过一个句柄解绑定，而addEventListener()通过一个句柄增加了一个处理函数，所以会导致事件参数无法传递的问题；即使绑定文档的处理程序在需要解除绑定的时候为空，也不能覆盖之前的绑定函数；最后，我们必须添加一个标志，并在需要解除函数绑定时更改标志的值。在绑定函数中，通过判断这个标志的值来决定是否做操作；

　　通过上述方法可以很好的实现鼠标滚动事件的效果，不会有兼容性问题。

　　注意：如果只有单个滚动事件绑定到表，滚动条可能不显示，甚至不设置；滚动条仅用于指示内容区域的滚动位置，配合拖动事件使用；

关于scroll和mousewheel事件的问题

需要注意的点

　　Firefox的鼠标滚轮事件是DOMMouseScroll。

　　参数兼容性：e=window.event e(下文略)

　　PreventDefault()函数取消默认事件，不会删除我们自己添加的事件处理。

实验开始

　　根据以下验证示例，实验之间不存在代码干扰：

　　1.原样输出

　　在元素中，无论您手动拉动滚动条还是滚动鼠标滚轮，“d”都不会出现。当元素滚动到顶部或底部时，输出的是 D ，但此时不输出 B ，这意味着滚动事件没有冒泡。文档的滚动事件由其他因素触发。

　　2.在element的mousewheel事件处理里把冒泡取消

　　e .停止传播()；

　　此时，当鼠标滚轮在元素中滚动时，‘C’始终不能出现，说明我们已经成功阻止了鼠标滚轮事件冒泡。但是当滚动条到达底部或顶部时，虽然 C 仍然没有出现，但是 D 出现了，说明此时文档的滚动事件是由element的鼠标滚轮触发的。

　　这里来了一个问题：element的mousewheel事件在默认处理中有没有处理过这种情况？

　　3.在element的mousewheel事件处理里取消默认处理

　　e . prevent default()；

　　此时在元素中滚动鼠标，只会出现‘A’和‘C’，页面不会滚动。它显示了鼠标滚轮滚动元素页面的效果是由元素的鼠标滚轮的默认事件处理的。这时候注意实验一中‘B’的输出量，大概就能猜出默认的加工过程。

　　4.在element的mousewheel里添加一个自己的页面滚动（与默认处理的滚动方向相反）

　　element . scroll top=e . wheel delta 0？30:-30;//手动添加页面滚动

　　此时，如果将鼠标滚动到元素内部，会发现即使滚动到顶部或底部，元素外部的页面也不会滚动，也没有输出‘D’，也就是没有触发document的scroll事件。不好的是，当你滚动到底部或顶部时，如果你继续滚动鼠标，元素仍然会滚动，但它只是先向下再向上(或先向上再向下)波动。

　　5.在element的mousewheel里添加一个自己的页面滚动（与默认处理的滚动方向相同）

　　element . scroll top=e . wheel delta 0？30:-30;//手动添加页面滚动

　　此时，如果将鼠标滚动到元素内部，会发现即使滚动到顶部或底部，元素外部的页面也会随之滚动，并触发输出‘d’，即触发document的scroll事件。

　　这里要注意一点：一个元素的scrollTop属性是不能无限增减的，只能在到达滚动的顶部或底部时反方向变化(可以自己输出测试)。

　　6.在实验5的基础上，将滚动的距离调整到很大

　　element . scroll top=e . wheel delta 0？300:-300;(该值应大于或等于滚动行程)

　　仔细观察 B 输出的数量，对比实验一，发现这次只有一个 B ，输出的也是 D ，而且有不少 D 。经过其他一些实验，得出默认事件处理的判断如下：

　　(功能滚动(元素){

　　for(var I=0；i12i ){

　　var temp=element.scrollTop

　　element . scroll top=e . wheel delta 0？10:-10;//滚动算法肯定不是这个，这里只是简单演示一下。

　　if(temp！=element.scrollTop){

　　//滚动“消息树”的下一个元素(冒泡是一个列表)

　　Varele=.//不知道怎么得到消息树。

　　卷轴(new ele)；

　　返回；

　　}

　　})();

　　验证例子：

　　addEventListener(element， mousewheel ，function(e){

　　console . log( a )；

　　});

　　addEventListener(element， scroll ，function(e){

　　console . log( b )；

　　});

　　addevent listener(document . documentelement， mousewheel ，function(e){

　　console . log( c )；

　　});

　　addEventListener(文档，滚动，函数(e){

　　console . log( d )；

　　});

　　结论：通过以上六个实验，我们很容易发现scrollTop属性在一个元素的mousewheel的默认处理事件中被改变和判断。如果没有变化，滚动外部元素(具体滚动算法未知，滚动距离与鼠标滚动相同)，以此类推。如果下一个元素到达边界，它将是下一个。这个过程与冒泡无关，而是对当前元素的mousewheel默认事件处理。

　　应用：因此，为了实现元素滚动到最后还会继续滚动，但外部元素不会滚动，我们可以直接取消它的默认处理，然后赋予它自己的滚动功能。至于怎么滚，就看你给什么函数了，冒泡取还是取消，就看你自己了。在冒泡和捕获阶段不执行上述默认处理。

　　例子如下：