vue-seamless-scroll绑定点击事件失效解决办法

在项目中碰到一个走马灯需求,选择使用vue-seamless-scroll插件进行解决

实际页面渲染后会出现点击某些span没有执行事件的情况。这个问题是因为vue-seamless-scroll是用重复渲染一遍内部元素来实现滚动的,而JS的onclick只检测页面渲染时的DOM元素。记得在入门原生JS的时候也经常会遇见这个问题,当时我采用事件委托来解决,现在也采用事件委托来解决这个问题。

在section上绑定事件handleSectionClick,捕获点击的DOM节点,若为span则执行事件。事件中需求的数据可以直接用data绑在相应的span上。



保存运行,正常处理了所有span的点击事件

你可能感兴趣的:(前端vue.js)