父元素绑定mousedown其子元素也会默认被绑上

最近在做滑块验证,从百度上找来一个使用mousedown、onmousemove、onmouseup来实现,然后点击绑定了mousedown事件的滑块,打印出来的e.target有时候会是其里面的子元素
代码如下:
在这里插入图片描述
在这里插入图片描述
打印出来的e.target
在这里插入图片描述
只要鼠标碰到i标签,后面移动的就是i标签,可是这并不是我想要的,我想要移动的是slider,不是一个标签。但是mousedown本身就是这样,看了文档也没提到这点,网上也没找到解决办法,于是去看vue的api,发现v-on有个修饰符.self ,只当事件是从侦听器绑定的元素本身触发时才触发回调。于是用上修饰符,发现还真可以
在这里插入图片描述
打印出来就只有slider了
在这里插入图片描述
唯一缺点就是,鼠标点到i标签就不触发了,体验不是很好,以后找到更好的办法再更新吧

发布了23 篇原创文章 · 获赞 4 · 访问量 1660
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览