用事件修饰符来修改事件

功能：当鼠标移动到"DEAD SPOT"上时，停止更新位置信息。
默认的，鼠标在P标签位置这一行移动时，由于有v-on，默认的会有一个默认的event事件对象自动创建给函数。所以当我在这一行移动时，eventX和eventY的值会不断变化。
现在的目的就是到鼠标移动到"DEAD SPOT"时，不传递event事件对象给p标签。
我想通过这个函数得到一个事件，也就是自动传递给函数的这个事件，然后调用stopPropagation()函数，确保事件不会传播给绑定有这个属性的元素，
阻止事件的传播，这个事件已经交由内部元素处理，不让事件传播到有这个属性的元素上，

也可以用事件修饰符来完成此功能：

原文地址：http://blog.51cto.com/13577938/2337869

时间： 2024-08-30 17:32:18

用事件修饰符来修改事件的相关文章

Vue学习之路第八篇：事件修饰符

学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几类: .stop:阻止冒泡 .prevent:阻止默认事件 .capture:事件捕获 .self:只当事件在该元素本身触发时触发回调 .once:事件只触发一次 1.阻止冒泡 页面代码: <div id="app" @click="clickDiv()">

VUE的事件修饰符

<div id="ON" v-on:click="handle0"> <p v-text="num"></p> @*v-on:click.stop="handle" 事件修饰符,在事件后面加.stop表示不再冒泡*@ <input id="Button1" v-on:click.stop="handle" type="button&qu

（二）咋使用VUE中的事件修饰符

1,stop修饰符:阻止事件冒泡 首先我们要明确H5的事件是从内向外进行冒泡的,写一个简单的DEMO 当我们点击按钮时,事件从内向外冒泡,依次触发绑定的事件,控制台信息如下 现在我们在click后面添加.stop修饰符,如下: 我们发现再次点击按钮后,事件不再冒泡,控制台只打出 2.prevent取消默认事件 .prevent等同于JavaScript的event.preventDefault(),用于取消默认事件.比如我们页面的<a href="#">标签,当用户点击时,

VueJS 事件修饰符

事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation()是非常常见的需求.尽管我们可以在 methods 中轻松实现这点,但更好的方式是:methods 只有纯粹的数据逻辑,而不是去处理 DOM 事件细节. 为了解决这个问题, Vue.js 为 v-on 提供了 事件修饰符.通过由点(.)表示的指令后缀来调用修饰符. .stop .prevent .capture .self .once <!-- 阻止单击事件冒泡 -->

vue 事件修饰符

1.修饰符种类 .stop .prevent .capture .self .once .passive 2.self修饰符说明 <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> 使用修饰符时,顺序很重要:相应的代码会以同样的顺序产生.因此,用 v-on:click.prevent.

事件修饰符

<div style="margin-top:100px"> <!--事件的监听--> <!--事件修饰符--> <div id="app"> <!--prevent 阻止默认事件的触发,这里地方会阻止跳转链接--> <a href="http://www.baidu.com" v-on:click.prevent>我是百度</a> <!--prevent

Vue—事件修饰符

Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue.js通过由点 (.) 表示的指令后缀来调用修饰符. .stop.prevent.capture.self.once <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面

vue学习(六) 事件修饰符 stop prevent capture self once

//html <div id="app"> <div @click="divHandler" style="height:150px,background-color:darkcyan"> <input type="button" value="点击" @click="btnHandler"> </div> <a href="

vue事件修饰符

.stop 使用该修饰符可以停止事件冒泡 .prevent 使用该修饰符可以阻止表单提交时的页面刷新等浏览器默认行为 .capture 如果含有嵌套结构,且使用了该修饰符,那么事件函数执行顺序是:先执行 由外到内 含有该修饰符的事件(没有被直接或间接触发的除外),再冒泡触发 .self 只能直接触发,子事件冒泡不会触发,但本身还是会冒泡触发父元素的事件 .once 事件函数只调用一次 .passive 提升页面滚动顺滑度 https://blog.csdn.net/dj0379/article/