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

事件对象


<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>

事件冒泡


<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>

阻止事件默认行为


<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)