Fixjs——显示交互基类InteractiveObject

于 2013-05-28 21:11:12 发布
阅读量2.4k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： Fixjs Javascript Fixjs 文章标签： JavaScript Web 框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hunkcai/article/details/8986583
本文深入介绍了Fixjs框架中的交互对象InteractiveObject类，详细阐述了如何通过DOM事件处理鼠标、键盘以及其他用户输入设备的交互事件，并展示了如何在Fixjs中实现点击、双击、鼠标移动等常见鼠标事件。此外，文章还提供了InteractiveObject类的完整代码，包括事件监听、事件派发以及鼠标事件类MouseEvent的定义。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Fixjs介绍

Fixjs是我打算在javascript技术领域开始积累的一个框架项目，这套框架主要为开发复杂组件提供底层的框架支持。

框架的类与接口我会尽量参考flash框架的实现。同时，我也会开放Fixjs的源代码，欢迎同仁一起学习、交流。

 

InteractiveObject

InteractiveObject 类是用户可以使用鼠标、键盘或其他用户输入设备与之交互的所有显示对象的抽象基类。随着移动设备的普及，还应该支持触摸的交互，这个留待日后完善。

实现InteractiveObject主要就是处理鼠标、键盘等交互事件，在Fixjs中，我是这样处理的：通过注册DOM元素的事件，然后再派发Fixjs的事件，说的直接些就是在DOM元素事件上面包了一层。

例如：实现“click”事件

重新addEventListener方法

    addEventListener: function(type, func) {

        switch (type) {

           case fixjs.events.MouseEvent.CLICK:

               $(this.ele).off("click", this._onDOMMouseEvent);

               $(this.ele).on("click", this._onDOMMouseEvent);

               break;

        }

        fixjs.display.InteractiveObject.base.addEventListener.call(this, type, func);

    }

在DOM事件处理_onDOMMouseEvent中，会重新派发fixjs.events.MouseEvent.CLICK事件

    _onDOMMouseEvent:function (event) {

        if (event.target!= event.currentTarget)

           return;

 

        var obj = event.target.fixjsObj;

        if (!obj.mouseEnabled)

           return;

        var type = fixjs.events.MouseEvent.CLICK;

        var e = new fixjs.events.MouseEvent(type);

        e.altKey = event.altKey;

        e.buttonDown = event.buttons >0;

        e.ctrlKey = event.ctrlKey;

        e.localX = event.offsetX;

        e.localY = event.offsetY;

        if (event.relatedTarget)

           e.relatedObject = event.relatedTarget.fixjsObj;

        e.shiftKey = event.shiftKey;

        e.stageX = event.pageX;

        e.stageY = event.pageY;

 

        obj.dispatchEvent(e);

        if (e.isDefaultPrevented())

           event.preventDefault();

    }

MouseEvent

定义鼠标事件类，继承于Event。

fixjs.events.MouseEvent = fixjs.events.Event.extend({

    init: function (type){

        fixjs.events.MouseEvent.base.init.call(this, type);

        this.altKey = false;

        this.buttonDown = false;

        this.ctrlKey = false;

        this.delta = 0;

        this.localX = 0;

        this.localY = 0;

        this.relatedObject = null;

        this.shiftKey = false;

        this.stageX = 0;

        this.stageY = 0;

    },

    disposing:function () {

        this.relatedObject = null;

        fixjs.events.MouseEvent.base.disposing.call(this);

    },

    clone:function () {

        var e = new fixjs.MouseEvent(this.type);

        e.altKey = this.altKey;

        e.buttonDown = this.buttonDown;

        e.ctrlKey = this.ctrlKey;

        e.delta = this.delta;

        e.localX = this.localX;

        e.localY = this.localY;

        e.relatedObject = this.relatedObject;

        e.shiftKey = this.shiftKey;

        e.stageX = this.stageX;

        e.stageY = this.stageY;

        return e;

    },

    toString: function (){

        return "[fixjs.events.MouseEvent]"+ this.type;

    }

});

定义鼠标事件常量。

fixjs.events.MouseEvent.CLICK = "click";

fixjs.events.MouseEvent.DOUBLE_CLICK = "doubleClick";

fixjs.events.MouseEvent.MIDDLE_CLICK = "middleClick";

fixjs.events.MouseEvent.MIDDLE_MOUSE_DOWN = "middleMouseDown";

fixjs.events.MouseEvent.MIDDLE_MOUSE_UP = "middleMouseUp";

fixjs.events.MouseEvent.MOUSE_DOWN = "mouseDown";

fixjs.events.MouseEvent.MOUSE_MOVE = "mouseMove";

fixjs.events.MouseEvent.MOUSE_OUT = "mouseOut";

fixjs.events.MouseEvent.MOUSE_OVER = "mouseOver";

fixjs.events.MouseEvent.MOUSE_UP = "mouseUp";

fixjs.events.MouseEvent.MOUSE_WHEEL = "mouseWheel";

fixjs.events.MouseEvent.RIGHT_CLICK = "rightClick";//与右键菜单冲突，暂时不支持

fixjs.events.MouseEvent.RIGHT_MOUSE_DOWN = "rightMouseDown";

fixjs.events.MouseEvent.RIGHT_MOUSE_UP = "rightMouseUp";

 

 

InteractiveObject的完整代码

fixjs.display.InteractiveObject = fixjs.display.DisplayObject.extend({

    init: function (ele) {

        fixjs.display.InteractiveObject.base.init.call(this, ele);

        this.mouseEnabled = true;

        this.tabEnabled = false; //to do...

        this.tabIndex = -1; //to do...

    },

    disposing:function () {

 

        fixjs.display.InteractiveObject.base.disposing.call(this);

    },

    addEventListener: function(type, func) {

        switch (type) {

           case fixjs.events.MouseEvent.CLICK:

           case fixjs.events.MouseEvent.MIDDLE_CLICK:

           case fixjs.events.MouseEvent.RIGHT_CLICK:

               $(this.ele).off("click", this._onDOMMouseEvent);

               $(this.ele).on("click", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.DOUBLE_CLICK:

               $(this.ele).off("dblclick", this._onDOMMouseEvent);

               $(this.ele).on("dblclick", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.MOUSE_DOWN:

           case fixjs.events.MouseEvent.MIDDLE_MOUSE_DOWN:

           case fixjs.events.MouseEvent.RIGHT_MOUSE_DOWN:

               $(this.ele).off("mousedown", this._onDOMMouseEvent);

               $(this.ele).on("mousedown", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.MOUSE_MOVE:

               $(this.ele).off("mousemove", this._onDOMMouseEvent);

               $(this.ele).on("mousemove", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.MOUSE_OUT:

               $(this.ele).off("mouseout", this._onDOMMouseEvent);

               $(this.ele).on("mouseout", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.MOUSE_OVER:

               $(this.ele).off("mouseover", this._onDOMMouseEvent);

               $(this.ele).on("mouseover", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.MOUSE_UP:

           case fixjs.events.MouseEvent.MIDDLE_MOUSE_UP:

           case fixjs.events.MouseEvent.RIGHT_MOUSE_UP:

               $(this.ele).off("mouseup", this._onDOMMouseEvent);

               $(this.ele).on("mouseup", this._onDOMMouseEvent);

               break;

           case fixjs.events.MouseEvent.MOUSE_WHEEL:

               $(this.ele).off("mousewheel ", this._onDOMMouseEvent);

               $(this.ele).on("mousewheel", this._onDOMMouseEvent);

               break;

           case fixjs.events.KeyboardEvent.KEY_DOWN:

               $(this.ele).off("keydown ", this._onDOMKeyboardEvent);

               $(this.ele).on("keydown", this._onDOMKeyboardEvent);

               break;

           case fixjs.events.KeyboardEvent.KEY_UP:

               $(this.ele).off("keyup ", this._onDOMKeyboardEvent);

               $(this.ele).on("keyup", this._onDOMKeyboardEvent);

               break;

           case fixjs.events.FocusEvent.FOCUS_IN:

               $(this.ele).off("focusin", this._onDOMFocusEvent);

               $(this.ele).on("focusin", this._onDOMFocusEvent);

               break;

           case fixjs.events.FocusEvent.FOCUS_OUT:

               $(this.ele).off("focusout", this._onDOMFocusEvent);

               $(this.ele).on("focusout", this._onDOMFocusEvent);

               break;

        }

        fixjs.display.InteractiveObject.base.addEventListener.call(this, type, func);

    },

    _onDOMMouseEvent:function (event) {

        if (event.target!= event.currentTarget)

           return;

        var obj = event.target.fixjsObj;

        if (!obj.mouseEnabled)

           return;

        var type;

        switch (event.type){

           case "click":

               switch (event.button) {

                   case 0:

                       type = fixjs.events.MouseEvent.CLICK;

                       break;

                   case 1:

                       type = fixjs.events.MouseEvent.MIDDLE_CLICK;

                       break;

                   case 2:

                       type = fixjs.events.MouseEvent.RIGHT_CLICK;

                       break;

               }

               break;

           case "dblclick":

               type = fixjs.events.MouseEvent.DOUBLE_CLICK;

               break;

           case "mousedown":

               switch (event.button) {

                   case 0:

                       type = fixjs.events.MouseEvent.MOUSE_DOWN;

                       break;

                   case 1:

                       type = fixjs.events.MouseEvent.MIDDLE_MOUSE_DOWN;

                       break;

                   case 2:

                       type = fixjs.events.MouseEvent.RIGHT_MOUSE_DOWN;

                       break;

               }

               break;

           case "mousemove":

               type = fixjs.events.MouseEvent.MOUSE_MOVE;

               break;

           case "mouseout":

               type = fixjs.events.MouseEvent.MOUSE_OUT;

               break;

           case "mouseover":

               type = fixjs.events.MouseEvent.MOUSE_OVER;

               break;

           case "mouseup":

               switch (event.button) {

                   case 0:

                       type = fixjs.events.MouseEvent.MOUSE_UP;

                       break;

                   case 1:

                       type = fixjs.events.MouseEvent.MIDDLE_MOUSE_UP;

                       break;

                   case 2:

                       type = fixjs.events.MouseEvent.RIGHT_MOUSE_UP;

                       break;

               }

               break;

           case "mousewheel":

               type = fixjs.events.MouseEvent.MOUSE_WHEEL;

               break;

        }

        var e = new fixjs.events.MouseEvent(type);

        e.altKey = event.altKey;

        e.buttonDown = event.buttons >0;

        e.ctrlKey = event.ctrlKey;

        e.localX = event.offsetX;

        e.localY = event.offsetY;

        if (event.relatedTarget)

           e.relatedObject = event.relatedTarget.fixjsObj;

        e.shiftKey = event.shiftKey;

        e.stageX = event.pageX;

        e.stageY = event.pageY;

        if (e.type== fixjs.events.MouseEvent.MOUSE_WHEEL)

           e.delta = event.originalEvent.wheelDelta;

        obj.dispatchEvent(e);

        if (e.isDefaultPrevented())

           event.preventDefault();

    },

    _onDOMKeyboardEvent:function (event) {

        if (event.target != event.currentTarget)

           return;

        var obj = event.target.fixjsObj;

        var type;

        switch (event.type){

           case "keydown":

               type = fixjs.events.KeyboardEvent.KEY_DOWN;

               break;

           case "keyup":

               type = fixjs.events.KeyboardEvent.KEY_UP;

               break;

        }

        var e = new fixjs.events.KeyboardEvent(type);

        e.altKey = event.altKey;

        e.ctrlKey = event.ctrlKey;

        e.keyCode = event.keyCode;

        e.shiftKey = event.shiftKey;

        obj.dispatchEvent(e);

        if (e.isDefaultPrevented())

           event.preventDefault();

    },

    _onDOMFocusEvent:function (event) {

        if (event.target!= event.currentTarget)

           return;

        var obj = event.target.fixjsObj;

        var type;

        switch (event.type){

           case "focusin":

               type = fixjs.events.FocusEvent.FOCUS_IN;

               break;

           case "focusout":

               type = fixjs.events.FocusEvent.FOCUS_OUT;

               break;

        }

        var e = new fixjs.events.FocusEvent(type);

        if (event.relatedTarget)

           e.relatedObject = event.relatedTarget.fixjsObj;

        e.shiftKey = event.shiftKey;

        obj.dispatchEvent(e);

        if (e.isDefaultPrevented())

           event.preventDefault();

    }

});

 

Fixjs_0.2.0源码下载

 

下载地址：http://download.youkuaiyun.com/detail/hunkcai/5469395

 

Fixjs_0.2.0已实现的内容：

【基础方法，基础类】

trace()：页面调试输出

fixjs.Class：类定义

fixjs.Object：提供对象初始化，释放控制，克隆接口

fixjs.DisposeUtil：释放资源工具类

fixjs.CloneUtil：克隆资源工具类

fixjs.Map：哈希数据结构

 

【事件处理】

fixjs.events.Event：事件类

fixjs.events.EventDispatcher：事件派发类

fixjs.events.MouseEvent：鼠标事件类

fixjs.events.KeyboardEvent：键盘事件类

fixjs.events.FocusEvent：焦点事件类

 

【几何数据结构】

fixjs.geom.Point

fixjs.geom.Rectangle

 

【显示类】

fixjs.display.DisplayObject

fixjs.display.InteractiveObject

 

 

相关文章

Fixjs专栏

 

博客
接口请求的后台发起确认
08-04 251
myBuilder的强大就体现在这些细节，这是主设计师20多年的技术底缊，匝心打造的IDE级别低代码平台。
博客
系统权限体系与安全策略的设计
08-04 717
一套完善的安全策略设计能够保障好系统的信息安全，特别是在公网运行的系统，更加需要注重数据资产的安全性。myBuilder渐进式低代码IDE已经具备这样完善的安全框架，开箱即用，采用myBuilder构建你的系统可以大幅减少了基础的功能建设。
博客
【实战篇】用低代码平台开发官网
07-04 591
知汇云创的官网开发，我是利用了AI+低代码的混合方式，文案和视觉设计方面我利用AI能力生成参考，再利用myBuilder低代码实现出来。内容是官网的灵魂要素，以下是知汇云创官网的思维导图，对官网内容大纲做整体规划。能够根据元素状态，例如：悬停，选中等，控制元素的展现样式。建议多技能合一：产品、前端、后端，1个人全部搞定交付。建议多技能合一：产品、前端、后端，1个人全部搞定交付。建议多技能合一：产品、前端、后端，1个人全部搞定交付。按钮、文本框、日期、下拉框、多选框等。走马灯、模板布局、导航栏等。
博客
应用侧的单点登录处理（以myBuilder为例）
07-04 302
以上就是myBuilder单点登录的对接过程，其中ssoFrom参数，可以判定不同系统采用不用的处理规则，保证灵活性。这里以应用A=myBuilder为例，看看myBuilder是如何处理单点登录的规则的。5. 访问应用A：用户带着令牌访问应用A，应用A向认证中心验证令牌。6. 访问应用B：用户访问应用B时，应用B同样重定向到认证中心。7. 自动登录：认证中心发现已有有效会话，直接颁发令牌给应用B。2. 重定向认证：应用A发现用户未登录，重定向到认证中心。3. 用户认证：用户在认证中心登录。
博客
关于myBuilder用作低代码数据交换平台的思考
06-12 811
myBuilder作为数据交换平台具备一定的可行性，对于内网授信，库与库间的数据交换具有实施快、灵活性高的优势。
博客
#低代码平台#myBuilder2.6大版本介绍
06-12 445
myBuilder2.6能够设计、开发PC端前台系统，例如：官网、商城...未来myBuilder的官网也会用自身进行低代码构建。前台系统对页面的展现要求更高，设计更灵活。独立应用myBuilder2.6引入了独立应用框架，该框架提供一个机制，能够允许在浏览器单独打开页面、报表，实现灵活展现的单页应用，登录页就是一个简单的前台系统页，如下图前台页设计器myBuilder2.6新提供了前台页设计器与配套的前台组件，以下是登录页的设计时效果前台页设计器提供丰富的样式设置，页面元素显示效果的完整控制。
博客
【实战篇】低代码报表开发——平台运营日报表的开发实录
05-15 461
myBuilder的推广有段时间了，想开发个报表看看平台运营的情况。采用myBuilder强大的报表、数据交换模块功能，直接开干。
博客
【实战篇】数字化打印——打印部署管理接口开发
05-15 367
前面的章节已经介绍了打印管理模块的主要界面设计，本篇介绍用myBuilder开发界面接口，实现最终的功能。
博客
【实战篇】数字化打印——打印管理模块的页面详细设计
04-27 401
本篇的结束了打印部署管理、打印客户端管理、打印任务管理3个界面模块的详细设计，均采用低代码可视化配置开发。打印客户端管理用于定义并管理打印客户端的基本信息以及打印配置信息，主要字段如下。打印部署管理用于管理租户下的打印格式版本，提供给打印作业进行引用。：提供一个脚本配置，让客户端动态计算打印任务是否需要忽略打印。本篇详细介绍每个页面模块的详细设计，以及关键功能要点的说明。页面的设计如下，界面可以控制打印格式版本的启用/禁用。打印部署管理的主要字段如下。
博客
【实战篇】数字化打印——打印格式设计器的功能说明
04-27 471
本篇详细介绍了myBuilder内置的打印设计器，如果你需要完善的打印管理系统/打印中间件，myBuilder能提供完整的解决方案，开箱即用，集成方便。设计时功能：撤销、重复、复制粘贴、新增删除组件、组件层级、多选对齐、缩放。设计时功能：撤销、重复、复制粘贴、新增删除组件、组件层级、缩放。设计时功能：撤销、重复、复制粘贴、新增删除组件、组件层级、缩放。属性编辑功能：显示文本、数据绑定（支持表达式）、边距边框。打印格式的保存、下载、上传。打印格式的保存、下载、上传。打印格式的保存、下载、上传。
博客
常见的低代码策略整理
04-17 1070
低代码策略尤其适合需要快速迭代的业务系统（如CRM、ERP）、标准化工具（表单、报表），以及需兼顾效率与灵活性的中长尾场景（如电商营销活动、数据看板）。验证邮箱的正则表达式：^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$：用户提交后，自动显示填充后的信息（如“您的订单号是：{{order_id}}”）。：提供数学计算（SUM）、字符串处理（CONCAT）、日期函数（NOW()）等。：从前端交互（脚本）、数据校验（正则）到后端处理（服务端逻辑），全流程支持。
博客
【实战篇】数字化打印——打印管理模块的概要设计（二）
04-17 295
表格行列布局设计方式，能够设置行、单元格属性，能够根据数据源自动控制打印分页，主要组件：报表行、单元格、二维码、一维码、图片...本篇的价值点在于分析了打印管理的各个功能的概要设计以及整体的技术设计，也提供了一个思路，如何界定低代码开发和自定义开发。拖放布局设计方式，能够对打印坐标进行设置，主要组件：文本、二维码、条形码...管理各类型的打印格式，主要操作包括：查询、新增、编辑、删除、部署。查询并管理打印任务数据，主要操作包括：查询、重置打印、删除。管理打印客户端，主要操作包括：查询、新增、编辑、删除。
博客
【实战篇】数字化打印——打印管理模块的业务设计（一）
04-15 846
跟我一起学设计与开发，我将从需求设计开始，到产品上线运营，讲述如何使用myBuilder开发打印管理模块。作为产品经理，理解并详细拆解打印管理模块的需求场景至关重要。
博客
企业如何使用低代码平台促进数字化转型
04-15 497
低代码平台通过简化应用开发流程、降低技术门槛和加速创新，成为企业数字化转型的重要推动力。
博客
什么情况下用低代码平台进行开发
04-09 700
低代码平台通过可视化界面和模块化组件简化开发流程，适用于多种场景。
博客
中小企业数字化转型痛点在哪？
04-02 615
数字化工具（如ERP、CRM、云计算等）的采购、部署和维护成本较高，对资金有限的中小企业构成压力。中小企业数字化转型本质是“管理升级”而非单纯技术问题，需结合自身业务特点，平衡短期生存与长期发展。员工也可能因技能不足抵触变革。：跟风转型，未结合自身业务痛点（如降本、增效、拓客），导致工具与实际需求脱节。：上下游企业数字化水平不一（如供应商未数字化），导致全链条效率难以提升。：从核心业务痛点（如财务、库存数字化）切入，逐步扩展，避免“一步到位”。：没有系统性规划，各部门数字化各自为政，形成“数据孤岛”。
博客
使用低代码平台时你的思维跟上了吗？
03-29 704
使用低代码平台开发与传统编程开发存在显著差异，需要开发者或业务人员调整思维方式，以充分利用低代码的优势并规避其局限性。低代码适合中小型应用，需提前评估未来扩展性（如用户量增长、功能复杂度），规划混合开发（低代码+原生代码）的可能性。设计应用前需明确数据结构（如实体关系、字段类型），低代码通常依赖数据库或表单驱动的开发模式。习惯通过拖拽组件、配置参数和连线逻辑（如流程图、状态机）构建应用，而非逐行编写代码。能用配置快速完成的功能，就尽量使用配置化完成，配置化解决不了的场合才自定义代码开发。
博客
Web端驱动的综合打印方案与场景
03-19 928
Web端驱动的综合打印方案能够满足多样化的打印需求，并提供更便捷、高效的打印体验。随着技术的不断发展，Web端打印方案将更加成熟、智能和安全，为用户带来更好的打印体验。我们采用近场部署客户端的方案，打印数据由用户浏览器发送到打印客户端，由打印客户端驱动打印机。另外，打印客户端还定时轮询打印数据源，实现自动批量打印。随着Web技术的快速发展，基于Web端的打印方案逐渐成为主流，它能够满足多样化的打印需求，并提供更便捷、高效的打印体验。利用浏览器自带的打印功能，调用操作系统打印接口，直接打印网页内容。
博客
B端安全网关的简单实现
03-17 472
网络分区机制‌：DMZ（非军事区）是安全网关设置的中间隔离区域，用于部署对外提供服务的设备（如Web服务器、邮件服务器），与内网核心数据区域物理隔离‌。DMZ内网穿透通过将穿透服务部署在隔离区，既实现外网对内网资源的访问，又通过分层防护降低安全风险，适用于对数据安全性要求较高的企业场景‌。访问控制‌：外网用户仅能访问DMZ区资源，无法直接触及内网敏感数据，即使DMZ区设备被攻破，内网仍受保护‌。架构设计‌：在DMZ区部署内网穿透服务（如反向代理服务器），作为外网与内网通信的“安全桥梁”‌。
博客
知汇云创myBuilder产品发布
03-14 561
我们要强调的是，下载的myBuilder是永久授权，没有使用时间限制，不限license。更多内容请下载后查看协议条款。myBuilder是一款面向B端数字化领域的低代码开发工具、集成开发环境，具备高效、灵活的使用特点，设计的初心是让B端数字化变得更简单。myBuilder的主要开发套件以及基础功能，我们有专门的培训课程详细讲解，这里先不展开介绍，相信通过我们的教学视频讲解您会逐一发现我们的产品亮点。借助myBuilder的快速设计、开发、运维功能优势，能帮组企业IT团队更高效的协同，提升人效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值