详解vue事件对象、冒泡、阻止默认行为

2024-12-19 08:23:12

整理文档，搜刮出一个vue事件对象、冒泡、阻止默认行为的代码，稍微整理精简一下做下分享。

事件对象

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
   window.onload = function(){
    var vm = new Vue({
     el:'#box',
     data:{},
     methods:{
      show:function(ev){
       alert(ev.clientX);
       alert(ev.clientY);
      }
     }
    });
   }
  </script>
 </head>
 <body>
  <div id="box">
   <input type="button" name="" value="按钮" @click="show($event)">
  </div>
 </body>
</html>

事件冒泡

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
   window.onload = function(){
    var vm = new Vue({
     el:'#box',
     data:{},
     methods:{
      show:function(){
       alert(111);
      //原生的写法
      //ev.cancelBubble = true;
      },
      show2:function(){
       alert(222);
      }
     }
    });
   }
  </script>
 </head>
 <body>
  <div id="box">
   <div @click="show2()">
    <input type="button" name="" value="按钮" @click.stop="show()">
   </div>
  </div>
 </body>
</html>

阻止事件默认行为

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <style>
    .show2{
      padding:15px;;
    }
  </style>
  <script src="../js/Vue.js" charset="utf-8"></script>
  <script type="text/javascript">
    window.onload = function () {
      var vm = new Vue({
        el: '#box',
        data: {},
        methods: {
          show: function () {
            alert(111)
          },
          show2: function () {
            alert(222)
          }
        }
      });
    }
  </script>
</head>
<body>
<div id="box">
  <div class="show2">
    <input type="button" name="" value="按钮" @contextmenu.prevent="show()">
  </div>
</div>
</body>
</html>

希望本文所述对你有所帮助，vue事件对象、冒泡、阻止默认行为内容就给大家介绍到这里了。希望大家继续关注我们的网站!想要学习vue可以继续关注本站。

Vue.js每天必学之方法与事件处理器

方法处理器可以用 v-on 指令监听 DOM 事件: <div id="example"> <button v-on:click="greet">Greet</button> </div> 我们绑定了一个单击事件处理器到一个方法 greet.下面在 Vue 实例中定义这个方法: var vm = new Vue({ el: '#example', data: { name: 'Vue.js' }, // 在 `met
vuejs父子组件之间数据交互详解

父子组件之间的数据交互遵循: props down - 子组件通过props接受父组件的数据 events up - 父组件监听子组件$emit的事件来操作数据示例子组件的点击事件函数中$emit自定义事件 export default { name: 'comment', props: ['issue','index'], data () { return { comment: '', } }, components: {}, methods: { removeComment: funct
vue监听滚动事件实现滚动监听

在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="https://unpkg
Vue键盘事件用法总结

这两天学习了Vue.js 感觉组件这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记,学习一下Vue键盘事件键盘事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></sc
Vue2单一事件管理组件通信

本文为大家分享了vue $emit 和 $on 组件通信,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <scri
详解vue组件化开发-vuex状态管理库

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试.状态快照导入导出等高级调试功能. 以上是vuex的官方文档对vuex的介绍,官方文档对vuex的用法进行了详细的说明.这里就不再细讲vuex的各个用法,写这篇博客的目的只是帮助部分同学更快地理解并上手vuex.
vuejs事件中心管理组件间的通信详解

本文为大家分享了vuejs事件中心管理组件间的通信,供大家参考,具体内容如下事件中心这个可以是一个空的全局的Vue实例,其他的组件利用这个实例emit和on自定义事件,这样组件定义了自己的事件处理方法. import Vue from 'Vue' window.eventHub = new Vue(); 事件监听和注销监听事件监听应在更组件的created钩子函数中进行,在组件销毁前应注销事件监听 //hook created: function () { //listen event w
详解vue事件对象、冒泡、阻止默认行为

整理文档,搜刮出一个vue事件对象.冒泡.阻止默认行为的代码,稍微整理精简一下做下分享. 事件对象 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/Vue.js" charset="utf-8"></script> <s
详解Vue 事件修饰符capture 的使用

.capture事件修饰符的作用添加事件侦听器时使用事件捕获模式即是给元素添加一个监听器,当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则由外而内触发. 就是谁有该事件修饰符,就先触发谁. 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.capture事件修饰符</title&g
详解Vue 普通对象数据更新与 file 对象数据更新

最近在做一个多图片上传的组件,需求是做到多文件依次上传,并显示上传进度条. 逻辑部分实现了以后,在更新进度条视图的时候出现一点问题:动态计算生产的进度 progress 属性不会自动更新. 原来的代码是这样写的: let files = this.filePicker.files; if(!files.length) { return; } let arr = []; for(let i = 0, len = files.length; i < len; i++) { let item = fi
js事件冒泡、事件捕获和阻止默认事件详解

谈起JavaScript的事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo
详解vue中v-on事件监听指令的基本用法

一.本节说明我们在开发过程中经常需要监听用户的输入,比如:用户的点击事件.拖拽事件.键盘事件等等.这就需要用到我们下面要学习的内容v-on指令. 我们通过一个简单的计数器的例子,来讲解v-on指令的使用. 二. 怎么做定义数据counter,用于表示计数器数字,初始值设置为0 v-on:click 表示当发生点击事件的时候,触发等号里面的表达式或者函数表达式counter++和counter--分别实现计数器数值的加1和减1操作语法糖:我们可以将v-on:click简写为@click 三
vue watch普通监听和深度监听实例详解(数组和对象)

下面通过一段代码给大家介绍vue watch的普通监听和深度监听,具体代码如下所示: var vm=new Vue({ data:{ num:1, obj:{ name:'三儿', age:'21', sex:'女' } }, watch:{ num(val, oldVal){ //普通的watch监听 console.log("num: "+val, oldVal); }, obj:{ //深度监听,可监听到对象.数组的变化 handler(val, oldVal){ console
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法

最近在项目中实现在循环出来的图片中当鼠标移入隐藏当前图片显示另一张图片的需求时碰到了一个小问题.就是当使用@mouseenter 和@mouseleave事件来实现这个需求时却发现鼠标移入后图片出现闪烁现象. 重点:事件写到父元素上才行!!! 0.0 下面写下我的实现方法和实现效果样式代码: <div class="imgs" v-for="(item,index) in exampleUrl" :key = index @mouseenter ="
详解vue中在父组件点击按钮触发子组件的事件

我把这个实例分为几个步骤解读: 1.父组件的button元素绑定click事件,该事件指向notify方法 2.给子组件注册一个ref="child" 3.父组件的notify的方法在处理时,使用了$refs.child把事件传递给子组件的parentMsg方法,同时携带着父组件中的参数msg 4.子组件接收到父组件的事件后,调用了parentMsg方法,把接收到的msg放到message数组中父组件 <template> <div id="app&qu
详解Vue之事件处理

在Vue进行前端开发中,事件监听是必不可少的功能,本文通过简单的小例子,简述v-on的简单用法,仅供学习分享使用,如有不足之处,还请指正. 监听事件可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码.如下所示: <button v-on:click="counter += 1">Add 1</button> <p>按钮被点击了 {{ counter }} 次.</p> 其中counter为Vue自定
详解JavaScript 事件流

事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 事件流事件流描述的就是从页面中接收事件的顺序.而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获. 事件流类别事件冒泡即从下至上,从目标触发的元素逐级向上传播,直到win

详解vue事件对象、冒泡、阻止默认行为

相关推荐

随机推荐