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

Posted 2021-03-14 yohe

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>

>下面这个是页面的效果