web-dev-qa-db-ja.com

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

JQueryを使用すると、ページ内の任意のアイテムのクリックイベントを以下のようにキャプチャできます。

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

Vue.jsで同じことをする方法

javascriptvue.jsvuejs2
9
asankasri
  1. <body>の直後に、最上位ノードとしてdivを作成します
  2. メインコンテナにします。
  3. それにVueJSをマウントします。
  4. <div id='yourMainDiv' @click='yourClickHandler'>

  5. VueJS <script>パートで使用します：

    メソッド：{yourClickHandler（event）{//質問でのオブジェクトとまったく同じオブジェクトである//イベントで必要な処理を行います}}

6
M U

M Uが提供する回答 は正しく、動作します。

それでも、テンプレートをいじるのが嫌いな場合（たとえば、多くのイベントハンドラーを配置しない場合）、またはVueアプリは大きなアプリケーションのごく一部にすぎませんが、それでも問題ありませんイベントハンドラを手動で登録することもできます。

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

短い例：

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)
    }
  }
})
24
Bengt

提供された答えはすべて機能しますが、$(document).click()の実際の動作を模倣するものはありません。ルートアプリケーション要素をクリックするだけで、ドキュメント全体ではありません。もちろん、ルート要素をheight: 100%などに設定できます。ただし、確認したい場合は、 Bengt ソリューションを変更し、イベントリスナーをdocumentに直接添付することをお勧めします。

new Vue({
  ...
  methods: {
    onClick() {},
  }
  mounted() {
    document.addEventListener('click', this.onClick);
  },
  beforeDestroy() {
    document.removeEventListener('click', this.onClick);
  },
  ...
});

何らかの理由でメインハンドラーへのイベントの伝播を停止する必要がある場合、子要素で@ click.stopを使用する必要があることを忘れないでください。

4
xpuu

また、特定の要素の外部でクリックイベントを追跡する必要がある場合は、 vue-clickaway コンポーネントを使用できます。 デモ の例：

<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';
    },
  },
});
3
Kirill Freiman