javascript - 可以在 TypeScript 中扩展 JQueryEventObject

标签 javascript typescript jquery

我才刚刚开始使用 Typescript,但我想知道是否可以使用新方法扩展 JQueryEventObject - 我想添加一个取消方法来设置事件停止冒泡和传播。

如果我的理解是正确的,则无法使用 TypeScript 执行此操作,因为 JQueryEventObject 只是一个接口(interface),创建它是为了提供对提供给事件的事件对象上可用内容的智能感知。但是,我可能是错的,如果有人有解决方案,那么我很感激有人与我分享。

最佳答案

你是正确的 typescript 定义是一个接口(interface),但是,你可以扩展它,你也可以扩展运行时来添加新功能。有两件事需要做:

  1. 让 typescript 知道新功能
  2. 让新函数在运行时在 jQuery 中可用

这是一个同时执行这两项操作的代码示例:

// PatchJquery.ts
// Include the generated .js file for this, after jQuery, in some html file.

/// <reference path="typedef/jquery/jquery.d.ts" />

// Runtime patch: Assume jQuery is already defined in the global scope 
// and patch its Event prototype.
jQuery.Event.prototype.cancel = function() {
    console.log("Someone wants me to cancel this event!",this);
}

// Define the extended typescript interface
interface ExtJQueryEventObject extends JQueryEventObject {
    cancel():void;
}

// Test
$(function() {
    var body:JQuery = $("body");
    body.on('click', (e:ExtJQueryEventObject) => {
        e.cancel();
    });
});

请注意,如果您想要一个实际的点击事件,您需要为 JQueryMouseEventObject 定义一个扩展接口(interface)。您需要为所有不同的 JQuery 事件类型执行此操作。或者,您可以只修改 jquery.d.ts 以将新函数添加到 BaseJQueryEventObject。

(顺便说一句,jQuery 有 stopPropagation() 和 stopImmediatePropagation(),它们可能已经做你想做的了)

关于javascript - 可以在 TypeScript 中扩展 JQueryEventObject,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21187271/

相关文章:

javascript - 为什么 Angular 2 或 Angular 4 使用香蕉括号?有什么具体原因吗?为什么他们不遵循与 Angular 1 相同的模式?

javascript - 我们应该在 React 功能组件的每个函数处理程序中使用 useCallback

javascript - 到达新页面后执行js

jquery - 动态添加和删除嵌套表单字段

javascript - 多次启动和停止相同的间隔

javascript - 计算行驶距离 Google Maps API

typescript - Chai 期望使用 Typescript 抛出与相同异常不匹配的异常

javascript - 使用 jquery 或 js 在实时聊天中生成底部滚动条

javascript - 如何使弹出窗口出现在我的鼠标进入悬停目标的位置?

javascript - Actionscript 2 Setinterval向计时器添加毫秒