vue2.0 中事件处理心得

最新推荐文章于 2022-11-16 09:05:32 发布

lhb_11

最新推荐文章于 2022-11-16 09:05:32 发布

阅读量526

点赞数

分类专栏： vue-js 文章标签： vue-js

本文链接：https://blog.csdn.net/lhb_11/article/details/78071402

版权

vue-js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<!-- self 只是作用在当前的元素上，子元素不出发该函数 -->
  <div class="pick-bg" v-show="childselectArea" @click.self="cancelClick">
    <div class="pick-com">
      <div class="dp-header">
        <div class="dp-item dp-left vux-datetime-cancel" data-role="cancel" @click="cancelClick">取消</div>
        <!-- stop 阻止事件的冒泡 -->
        <div class="dp-item dp-right vux-datetime-confirm" data-role="confirm" @click.stop="sureClick">确定</div>
      </div>
      <picker :data='addressList' :fixed-columns="columns"  :columns="3" v-model='selectAddList' @on-change='change' ref="picker"></picker>
    </div>
  </div>

事件捕获

含义:从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发,也就是说事件从最上一级元素开始往下查找，直到捕获到事件目标(target)。
直白点:事件触发顺序父元素->子元素

事件冒泡

含义:从最不精确的对象(document 对象)开始触发，然后到最精确对象(也可以在窗口级别捕获事件，不过必须由开发人员特别指定),也就是说事件从事件目标(target)开始，往上冒泡直到页面的最上一级元素。
直白点:事件触发顺序子元素->父元素

事件冒泡和事件捕获-图解

示意图

Vue2.0中的capture

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <style>
        * {
              box-sizing: border-box;
              margin: 0;
              padding: 20px;
              transition: background 800ms;
            }

            ul {
              height: 100%;
              list-style: none;
              background: hsl(193, 66%, 85%);
            }

            li {
              height: 100%;
              background: hsl(193, 66%, 95%);
            }

            .highlight {
              background: red;
            }
    </style>
</head>
<body>
<div id="app">
  <ul @click="callback($event)">
    <li @click="callback($event)">One</li>
    <ul @click="callback($event)">
      <li @click="callback($event)">Two</li>
      <ul @click="callback($event)">
        <li @click="callback($event)">Three. Click Me!!!</li>
      </ul>
    </ul>
  </ul>
</div>
<script>
    var pause = 200;
    new Vue({
      el: "#app",

      methods: {
        callback(event) {
          var ms = event.timeout = (event.timeout + pause) || 0;
          var target = event.currentTarget;

          console.log(target);

          setTimeout(function() {
            target.classList.add('highlight');
            setTimeout(function() {
              target.classList.remove('highlight');
            }, pause);
          }, ms);
        }
      }
    })
</script>
</body>
</html>
添加修饰符.capture后 在捕获阶段中监听事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <style>
        * {
              box-sizing: border-box;
              margin: 0;
              padding: 20px;
              transition: background 800ms;
            }

            ul {
              height: 100%;
              list-style: none;
              background: hsl(193, 66%, 85%);
            }

            li {
              height: 100%;
              background: hsl(193, 66%, 95%);
            }

            .highlight {
              background: red;
            }
    </style>
</head>
<body>
<div id="app">
  <ul @click="callback($event)">
    <li @click="callback($event)">One</li>
    <ul @click="callback($event)">
      <li @click="callback($event)">Two</li>
      <ul @click="callback($event)">
        <li @click="callback($event)">Three. Click Me!!!</li>
      </ul>
    </ul>
  </ul>
</div>
<script>
    var pause = 200;
    new Vue({
      el: "#app",

      methods: {
        callback(event) {
          var ms = event.timeout = (event.timeout + pause) || 0;
          var target = event.currentTarget;

          console.log(target);

          setTimeout(function() {
            target.classList.add('highlight');
            setTimeout(function() {
              target.classList.remove('highlight');
            }, pause);
          }, ms);
        }
      }
    })
</script>
</body>
</html>

添加修饰符.capture后 在捕获阶段中监听事件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
    <style>
        * {
              box-sizing: border-box;
              margin: 0;
              padding: 20px;
              transition: background 800ms;
            }

            ul {
              height: 100%;
              list-style: none;
              background: hsl(193, 66%, 85%);
            }

            li {
              height: 100%;
              background: hsl(193, 66%, 95%);
            }

            .highlight {
              background: red;
            }
    </style>
</head>
<body>
<div id="app">
  <ul @click="callback($event)">
    <li @click="callback($event)">One</li>
    <ul @click="callback($event)">
      <li @click="callback($event)">Two</li>
      <ul @click="callback($event)">
        <li @click="callback($event)">Three. Click Me!!!</li>
      </ul>
    </ul>
  </ul>
</div>
<script>
    var pause = 200;
    new Vue({
      el: "#app",

      methods: {
        callback(event) {
          var ms = event.timeout = (event.timeout + pause) || 0;
          var target = event.currentTarget;

          console.log(target);

          setTimeout(function() {
            target.classList.add('highlight');
            setTimeout(function() {
              target.classList.remove('highlight');
            }, pause);
          }, ms);
        }
      }
    })
</script>
</body>
</html>