如何从 vue.js 捕获 Jquery 事件

Posted 2023-02-22

【中文标题】如何从 vue.js 捕获 Jquery 事件

【英文标题】：How to catch Jquery event from vue.js

【发布时间】：2018-02-20 21:54:56

【问题描述】：

场景：我有一个 iframe（托管在同一个域中，但仅使用 Jquery）并且它已经被编码为使用参数触发一些事件。而且我必须在父 vue.js 应用程序中使用参数捕获这些事件。

iframe：

$('*').mouseover(function (event) 
  var event = jQuery.Event( "mouseover-highlight" );
  event.top = $(this).offset().top;
  event.left = $(this).offset().left;
  parent.$('body').trigger(event);
);

vue.js

从 vue.js 中以某种方式捕获此事件并相应地设置 div 的 css 样式（设置“绝对”位置）。在 v2 到来之前，我已经使用 vue.js 通过在 vue.js 中使用 Jquery 来完成它，但是我在文档中看到 vue.js 不再能够捕获本机事件。有什么解决办法吗？

【问题讨论】：

您想从包含 iframe 的页面捕获 iframe 中发出的事件？

没错，iframe 是使用 jquery 触发事件，其内容的页面（父页面）使用的是 vue.js。

【参考方案1】：

您可以使用$on 以编程方式监听事件。

Nova.$on('resources-loaded', () => 
    console.log('Cooking with gas');
    // Do jQuery related stuff here.
);

这适用于为 Vue 实例定义的任何常量变量。例如。 Vue.$on 或 app.$on 等

【参考方案2】：

https://jsfiddle.net/wx84na32/2/ 请检查小提琴这是您想要的完整示例。 html

<button id="testBtn">Trigger an event</button>
<div id="app">
<div v-show="this.show">
1st Argument of Custom Event <br />
" one "
<br />
2nd Argument of Custom Event <br />
" two "
<br />
A complete event object below <br />
 event 
</div>
</div>

javascript / jQuery / Vue

//jQuery

$('#testBtn').on("click", function(event) 
    console.log(this, 'this');
  $(this).trigger("custom", ["1st", "2nd"]);
);

//vue.js


new Vue(
  el: '#app',
    mounted () 

    let _this = this;

    $(document).on("custom", function(event, one, two) 

        console.log(event, 'event');
      console.log(one, 'one');
      console.log(two, 'two');

      _this.event = event;
      _this.one = one;
      _this.two = two;

      _this.show = true;

    );
  ,
  data () 
    return 
        show : false,
        event : ,
      one : '',
      two : ''
    
  
);

[https://jsfiddle.net/wx84na32/2/]

【讨论】：

我意识到这是近 2 年前的答案，但它很好地解决了我的问题。感谢您的回答和 JSFiddle。

我可以确认它有效！谢谢。

感谢@Mihai 的确认。

【参考方案3】：

jQuery 使用它自己的事件系统。您无法使用 Vue 捕获从 jQuery 发出的事件，您必须使用 jQuery 捕获它们并从处理程序调用 Vue。

new Vue(
  el: "#app",
  data:
    iframeSource: $("template").html()
  ,
  methods:
    onMouseover(event)
      alert(`Top: $event.top, Left: $event.left`)
    
  ,
  mounted()
    $("body").on("mouseover-highlight", this.onMouseover)    
  ,
  beforeDestroy()
    $("body").off("mouseover-hightlight", this.onMouseover)
  
)

这是an example 的工作。

注意：当使用 Vue 以外的东西添加事件时，您应该自行管理删除它们，尤其是当您将其添加到组件中时。组件被多次创建/销毁，您不希望以多个处理程序结束。

【讨论】：

这很棒，任何传递和获取参数的方式（例如，让我们说位置，就像我的问题一样）？

@stackminu 当然。看起来您正在将它们添加到事件中，因此只需将事件作为参数接受即可。我会更新的。

成功了。请在 stackflow 的答案上更新钢笔的答案，我会将其标记为正确答案。

@stackminu 他们应该是一样的。我错过了什么？由于跨域问题，完整的答案不适用于 SO。

可以通过将crossorigin="anonymous"添加到iframe标签来修复跨域... :)

【参考方案4】：

使用 Vue 附加事件侦听器并使用 jQuery 发出事件。

【讨论】：

刚刚搜索了 jsfiddle 或有关如何附加事件侦听器并使用 Jquery 发出事件的文档。你能给我举个例子吗？我是 Vue.js 的新手。事实上，在一个项目上这样做是一个实验。 :)

使用 jQuery 你可以触发这样的事件。 $.event.trigger( type: "newMessage", message: "Hello World!", time: new Date() );

vue.js 上的事件监听部分是我不明白的。您的意思是 vue.js 中有没有办法在没有 v-on 的情况下捕获外部触发的事件？

@MuhammadAdil 请根据 cmets 的说明更新您的答案。

jsfiddle.net/wx84na32/2 请检查此小提琴这是您想要的完整示例。 @stackminu