当前位置:   article > 正文

Vue中的event阻止事件冒泡、默认事件_vuedraggable阻止事件冒泡

vuedraggable阻止事件冒泡

vue的事件对象:

@dragstart=’drag(event)′,在函数中传evevt ,函数中接收一下,事件对象就有了。

  1. <div class="select-item" draggable='true' @dragstart='drag($event)' v-for="item in items">{{item.name}} //传输事件对象
  2. </div>
  1. <script>
  2. var dom;
  3. export default{
  4. data(){
  5. return{}
  6. },
  7. methods: {
  8. drag:function(event){ //接收事件对象
  9. dom = event.currentTarget;
  10. }
  11. }
  12. }
  13. </script>

vue中阻止事件冒泡

1、@click=’show($event)’ 有了事件对象,函数可以利用原生中的 event.cancelBubble=true;

2、@click.stop=’show()’ 只要在事件后面加 .stop 就可以阻止事件冒泡

vue的中阻止默认事件

1、@click=’show($event)’ 有了事件对象,函数就可以利用原生中的 event.preventDefault();

2、@click.prevent=’show()’ 只要在事件后面加.prevent 就可以阻止默认事件

vue的键盘事件:

@keydown=’show()’,我们传个$event 也可以在函数中获 event.keyCode 。

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/blog/article/detail/79392
推荐阅读

  • 之间要通信----点击小图上面大图也应该跟着换—兄弟通信----,与首页轮播图原理类似,多了几个控制属性,不要了几个控制属性。点击图片有高亮边框用。_changeskunum(event){//用户输入进来文本*1就是nanletval... [详细]

  • LVM是逻辑卷管理(LogicalVolumeManager)的简称,它是Linux环境下对磁盘分区进行管理的一种机制。LVM通过在硬盘和文件系统之间添加一个逻辑层,来为文件系统屏蔽下层硬盘分区布局,提高硬盘分区管理的灵活性。_device... [详细]

  • Vue中,事件处理函数常常需要获取事件触发时的相关信息,比如鼠标位置、按键信息等。而要获取这些信息,就需要使用event对象。那么在Vue事件中如何正确使用event对象呢?接下来就来详细介绍一下。Vue事件中如何使用event对象在V... [详细]

  • vue+vuedraggable实现文字/按钮/div拖拽组件详解_vue-draggable-divvue-draggable-div先看成果:(样式业务简陋请见谅!)如图:左侧按钮/div/span/拖拽到右侧生成组件,右侧组件之间也可... [详细]

  • vue事件对象$event_事件对象$event事件对象$event  参考来源:黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端必会的框架教程_哔哩哔哩_bilibili功能:点击按钮,增加减... [详细]

  • 前提:通过导航定位位置时,点击事件用到a的href的hash,但需要取消a的默认动作,需要得到点击元素的event对象html代码[详细]

  • 我是子组件2点击我触发自定义事件xxx_vue点击事件获取事件对象vue点击事件获取事件对象point1:获取事件对象事件的回调函数中传入参数$event,可以获取事件事件对象<template><button@cl... [详细]

  • 在jquery,我们传入到bind方法的回调,只能是一个函数类型的变量或者一个匿名函数,传递的时候,还不能执行它(在后面加上一堆圆括号),否则就变成了取这一个函数的返回值作为事件回调。我们知道,相比于jquery,vue事件绑定可以显... [详细]

  • varisie=(document.all)?true:false;varkey;varev;if(isie){key=window.event.keyCode;ev=window.event;}else{key=e.which;ev=e;... [详细]

  • body{line-height:1.5;}1、event代表事件的状态,例如触发event对象的元素、鼠标的位置及状态、按下的键等等。event对象只在事件发生的过程中才有效。event的某些属性只对特定的事件有意义。比如,fromEle... [详细]

  • vue_vue3$eventvue3$eventVue获取事件的event对象(一)——不传参-默认event对象&传参数$event-可添加其他参数方式一:默认获取不填写时,默认第一个参数就是event对象。1、只获取本身的值,... [详细]

  • 方式一:默认获取不填写时,默认第一个参数就是event对象