vue app左右滑动页面内有拖动事件互相干扰怎么办

发布网友发布时间：2022-03-26 03:12

共1个回答

热心网友时间：2022-03-26 04:41

DOM事件在Vue中为DOM元素绑定事件的具体方法在文章中的方法与事件处理器章节，通过v-on指令或事件语法糖@为DOM元素绑定事件。Vue解析组件模板后，在绑定更新v-on指令时会为DOM元素绑定事件(当然如果元素为iframe，会等到iframe加载完成后再为其绑定事件)。Vue中为DOM元素绑定事件是采用DOM2级事件的处理方式，因为Vue服务的是IE9以上的现代浏览器，他们也都是支持DOM2级事件。因此下例中实际上相当于el.addEventListener('click',func)所以addEventListener支持绑定的事件，v-on指令也都支持。同样的理论上也可以解绑事件，虽然也有相应的api，但是Vue文档中并没有显示地告诉我们怎么做。在代码中可以看到，每个v-on指令都有一个reset方法，reset方法是当指令所绑定方法发生改变时，重新绑定事件之前的解绑操作，我们可以利用这个api来解绑事件。因此如果需要解绑事件，我们可以遍历vm._directives找到相应该指令，进行解绑。当然既然是采用DOM2级事件处理，也可以使用removeEventListener直接进行解绑，看这个demo。执行解绑操作后btn1的确解绑成功了，但btn2没有解绑成功，这要说到v-on指令的修饰符，见源码中对带有修饰符的handler的处理。顾名思义，修饰符修饰过的handler做了的事情，Vue的处理是包装原handler新的handler用于向DOM元素绑定，而解绑时仍然解绑原方法当然会失败。当然这只是分析Vue的事件绑定原理，大多数情况下我们并不需要去解绑事件。合理的利用事件委托可以解决大部分由事件绑定引起的性能问题。自定义事件Vue自定义事件是为组件间通信设计，自定义事件提供了$on、$off、$once、$emit、$broadcast、$dispatch几个api，非常简洁。首先提两个vm的私有变量，vm._events和vm._eventCount。每个vm实例所有的自定义事件都将存储在vm._events，而vm._eventsCount存储的是执行事件广播后子组件触发自定义事件处理程序的数量，这是为了事件广播优化而来的，如果vm._eventsCount[event]数量为零，当事件广播时则可断定子组件没有该事件的*，就没必要向子组件层层捕获该事件*了。$on注册一个自定义事件，注册事件很简单，首先将其挂载到该实例下vm._events[event]=fn然后是向上传播，更新各个组件的_eventsCount。这里需要注意，我们可以通过$on为生命周期注册钩子，点击查看demo，但是生命周期不可冒泡和广播，所以需要更新eventsCount前需要过滤。查看modifyListenerCount$once因为$once注册的事件是一次性的，执行完后卸载，所以其实$once调用$on来注册事件的函数是包装过的。$off理解了注册事件的流程(其实就是更改_events和_eventsCount)那么卸载事件也就很清晰了。但是$off支持三种卸载方式1、如果没有参数，则删除所有的事件*遍历_events，冒泡更新每个事件的_eventsCount，清空vm._events2、如果只提供了事件，则删除这个事件所有的*冒泡更新每个事件的_eventsCount，vm._events中剔除该事件3、如果同时提供了事件与回调，则只删除这个回调遍历vm._events[event]的事件处理方法，如果该事件处理方法和回调相同，则从vm._events[event]剔除该事件处理方法，并冒泡更新该事件的_eventsCount$emit触发事件，直接遍历vm._events[event]的每个事件处理程序并执行。$emit返回shouldPropagate，shouldPropagate是一个布尔值，取决于父链上的是否存在该事件的*以及，事件处理程序返回的值。他决定$dispatch是否停止冒泡。dispatch派发事件。首先在实例上触发该事件，默认情况下将会停止冒泡传播，但如果$emit返回的shouldPropagate为true，则该事件会继续沿父链向上传播，即在父组件继续向上派发事件。broadcast事件广播。深度优先遍历子组件，并执行各个子组件的*事件处理程序，在绑定和卸载自定义事件时会会每个组件维护一个vm._eventsCount，而它的作用正是在深度遍历的时候给予提示，避免不必要的深度遍历。通过自定义事件在组件之间的传播，我们可以利用它进行组件通信。组件通信在应用开发过程中是一个棘手的问题，因为它直接关系到整个应用的健壮和可维护程度，在开发大型项目中建议引入vuex，从应用架构的角度来考虑组件通信相比这种事件形式更容易维护，比如多个子组件都有派发事件与父组件进行通信，如果子组件派发事件不注意命名规范，出现命名重复情况，那么父组件*根本不知道这个事件是从哪里派发过来的以技如何处理，这是隐患之一。如果采用这种方式进行组件通信，那么必将导致子组件大量派发事件，那么父组件将要维护大量的事件*，如果时间久了，很容易忘记*和派发事件子组件的对应关系，这又增加了开发与维护成本。充斥着事件派发的组件维护成本也是一个容易留坑的地方。此外通过事件可以进行父子组件的通信，但兄弟组件的通信有需要增加不少开发成本。组件的自定义事件在上文分析DOM元素绑定事件中，我们用到这个例子但是有时候会出现v-on为组件绑定事件的情况，如上文中没有分析到，留在这里说，这里有两个明显区别是组件而不是DOM元素自定义事件而不是DOM事件因此显然addEventLisntener不适用，而且Vue执行的也是和第一个例子完全不同的处理方式，对其的处理在registerComponentEvents。它其实是为组件注册自定义事件。这里v-on指令绑定的结果是demoVm._ahref="http://www.yingtaow.com/appdz/"title="成都app制作开发公司events[myfunc]=[func]以及更新_eventsCount。查看这个demo。可见v-on指令既可为DOM元素绑定事件也可为组件绑定自定义事件。明白了这个，这个issuse的原因也就很明了了。