Vue小基础鼠标点击和阻止冒泡

Posted yohe

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue小基础鼠标点击和阻止冒泡相关的知识,希望对你有一定的参考价值。

1.once修饰符的使用(once修饰符是让点击事件只能够执行一次)。
2,阻止冒泡事件,使用JS阻止和Vue修饰符stop阻止


  <div id="app">
    <p>{{ age }}</p>
    <!-- 使用Vue的once修饰符,让点击事件只能使用一次 -->
    <button @click.once='btn'>只能点击一次</button>
    <button @click='btn2(10)'>加10</button>
    <br>
    鼠标事件
<!-- 使用鼠标移入事件,获取在该区域内的坐标值-->
     <div class="box" @mousemove='updateXY'
      style=" width: 500px;border: 1px solid red;
      text-align: center;
      padding: 200px 20px;">
      {{x}},{{y}}
      <!-- 阻止冒泡事件 使用vue的事件修饰符阻止冒泡事件,鼠标移动到该区域之前的事件停止 -->
      <!--使用Vue修饰符 stop阻止-->
      <span @mousemove.stop="">阻止冒泡事件</span>
      <p style="padding: 50px 0;background-color: red;" @mousemove='doThis'>JS自带阻止冒泡事件的方法</p>
    </div>
  </div>
  <script src="js/vue.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: {
        age: 30,
        x: 0,
        y: 0
      },
      methods: {
        btn() {
          this.age++;
        },
        btn2(sum) {
          this.age += sum;
        },
        updateXY(event) {
          // console.log(event)
          // event是系统自带的从里面拿它的位置属性
          this.x = event.offsetX;
          this.y = event.offsetY;
        },
        // JS阻止冒泡事件的方法
        doThis(event) {
          event.stopPropagation();
        }
      },
    })
  </script>

>下面这个是页面的效果

技术图片

以上是关于Vue小基础鼠标点击和阻止冒泡的主要内容,如果未能解决你的问题,请参考以下文章

vue阻止冒泡事件 阻止点击事件的执行 结合div和组件阻止点击事件

小程序 鼠标事件

vue阻止事件冒泡,事件穿透

vue阻止事件冒泡和默认事件

类似select下拉框,鼠标点击元素以外隐藏下拉框(阻止冒泡事件)

vue 阻止change事件冒泡