Vue.js +ページ全体のクリックイベントを呼び出す

JQueryで、ページ内の任意の項目のクリックイベントを以下のように取得できます。 Vue.jsと同じことを行う方法をVue.js +ページ全体のクリックイベントを呼び出す

$(document).click(function(event){ 
    // event.target is the clicked element object 
});

？

出典

2017-01-31 asankasri

[ 'document.addEventListener（ 'クリック'、イベント=> {...}、false）を']（https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener） – Phil

ありがとうございました。しかし、私はVue.jsでそれを行う方法を知りたいです – asankasri

どういう意味ですか？ 'Vue.js'はJavaScriptだけで、' document'に 'Vue'インスタンスをマウントすることはできません。それは要素にのみ実装することができます – Phil

それ本体容器作る右<body>
た後、最上位ノードとしてdiv要素を作成します。
それにVueJSをマウントします。あなたのVueJSで
<div id='yourMainDiv' @click='yourClickHandler'>
<script>一部それを使用する：

方法：{ yourClickHandler（イベント）{ //は、あなたの質問と全く同じオブジェクトであるイベント //であなたがやりたいです }}

出典

2017-01-31 08:08:22

divにコンテンツをラップするのではなく、body要素を使用できませんか？ – asankasri

これについてはわかっていませんが、決してできませんでした。 –

Vueをbody要素にバインドすることはできません（[this]（http://stackoverflow.com/questions/39164791/を参照）。 bind-vue-on-body-or-others-element））、body-tagを含むテンプレートは提供しません。 – Bengt

answer provided by M Uは正しいとの作品です。

テンプレートを使いこなすのが嫌い（イベントハンドラをたくさん入れないなど）、またはVueアプリが大きなアプリケーションのほんの一部に過ぎない場合は、イベントを登録することもできますハンドラを手動で実行します。

スクリプトにあなたがmountedに登録してbeforeDestroyフックでそれらを削除する必要があり Vueの道をグローバルイベントハンドラを追加します。

ショート例：あなたは、特定の要素の外のイベントをクリックし追跡する必要がある場合

var app = new Vue({ 
    el: '#app', 
    mounted: function() { 
    // Attach event listener to the root vue element 
    this.$el.addEventListener('click', this.onClick) 
    // Or if you want to affect everything 
    // document.addEventListener('click', this.onClick) 
    }, 
    beforeDestroy: function() { 
    this.$el.removeEventListener('click', this.onClick) 
    // document.removeEventListener('click', this.onClick) 
    }, 
    methods: { 
    onClick: function (ev) { 
     console.log(ev.offsetX, ev.offsetY) 
    } 
    } 
})

出典

2017-01-31 13:05:44 Bengt

クレジットをありがとうございます。ニースの答えも –

はまた、あなたが vue-clickawayコンポーネントを使用することができます。 demoから例：

<div id="demo"> 
    <p v-on-clickaway="away" @click="click" :style="{ color: color }">{{ text }}</p> 
</div> 


new Vue({ 
    el: '#demo', 
    mixins: [VueClickaway.mixin], 
    data: { 
    text: 'Click somewhere.', 
    color: 'black', 
    }, 
    methods: { 
    click: function() { 
     this.text = 'You clicked on me!'; 
     this.color = 'green'; 
    }, 
    away: function() { 
     this.text = 'You clicked away...'; 
     this.color = 'red'; 
    }, 
    }, 
});

出典

2017-02-12 13:51:46

Vue.js +ページ全体のクリックイベントを呼び出す

答えて

関連する問題