由object元素引出的事件注册问题和层级显示问题

项目有一个双击监控视频全屏的需求,视频播放使用的是IE下的ActiveX控件,web页面中使用HTML嵌入对象元素object。预期方案如下:

1.在开发ActiveX控件时加入双击事件。

2.通过div包裹object,控制div的大小从而间接实现全屏效果。

在实施第二种方案的过程中,发现如下两个问题:

事件注册问题

在第二种方案中,首先经过测试添加单击或双击事件均无响应。

(疑问1:object不支持单双击事件?但在IE下发现这种方式可以响应:

function fullscreen(a){alert(a);}
/**
*错误的方式:不传参数,会弹出undefined,会直接执行fullScreen函数,这段代码相当于如下两行:
*var temp=fullScreen(); 
*document.getElementById("objectid").οnclick=temp;
*/
document.getElementById("objectid").οnclick=fullScreen();
/**
*错误的方式:传参数时,会弹出1,会直接执行fullScreen函数,这段代码相当于如下两行:
*var temp=fullScreen(1); 
*document.getElementById("objectid").οnclick=temp;
*/
document.getElementById("objectid").οnclick=fullScreen(1);
/**
*正确的方式,此时会弹出event对象,但由于object元素不支持事件所以并不响应
*/
document.getElementById("objectid").οnclick=fullScreen;
结论:在通过对象的属性注册事件函数的时候,表达式的右值必须为一个函数名字即不带括号,并且不可手动传递参数(浏览器会将event对象自动传入或window.event),
从表达式本身出发我们也能发现,表达式为一个赋值表达式,‘=’的右值是一个指向函数的地址,
当只写函数名字的时候,此时右值的函数名字相当于一个指针,指向函数体所在的内存地址,等到事件发生时就会调用并执行相应的函数。
但是当加了括号后,会首先计算右边的函数体,而函数体执行必然会返回一个值(显示的return返回值或undefined),这个值则会作为右值赋值给onclick等类似的属性。

 

 

 

经过测试,在IE下,不管是属性注册事件或者方法注册事件均不能响应。即Object作为一个嵌入对象元素是不支持浏览器中各种事件的,这样做的目的可能是作为一个引用外部资源的元素来说,object本身不具备响应事件的能力,而把这种交互能力给予外部的对象,以避免类似ActiveX这样的控件的行为与object的行为冲突。

层级显示问题

然后我想通过透明div覆盖object,给div添加单双击事件,但是发现div无法覆盖,查阅后才知道object似乎拥有很高的层级。

(疑问2:object作为嵌入对象元素是否在web文档流中?我的猜测:从web历史上来看,web文档最初是用来显示文本的,作为引用外部资源的object元素是不在文档流中的,而且我发现在ie下选取元素的时候是无法选取到object元素的,其他浏览器暂时未测试。)

从查阅得知iframe的层级高于object,于是便设置div覆盖iframe,iframe覆盖object,从而间接实现div覆盖object。

虽然覆盖可以实现,但是有一个问题就是当div和iframe都设置透明时,object似乎夹在二者中间被贯穿了,直接一透到底,透明的下面不是object,而是网页的底色。

 1 <div class="wrap2-item-video1">
 2                 <div ondblClick="fullScreen()" style="color:#fff;font-size:12px;position:absolute;background:green;width:50px;height:50px;top:0;left:0;z-index:9;">
 3                     放大/缩小    
 4                 </div>
 5                 
 6                 <iframe style="background:red;position:absolute;visibility:inherit; top:0px;left:0px;width:100px;height:100px;z-index:1;"></iframe>
 7                 
 8                 <object classid="clsid:30209FBC-57EB-4F87-BF3E-740E3D8019D2" codebase="" standby="Waiting..."
 9                         id="playOcx" width="100%" height="100%" name="playOcx" align="center">
10                         <param value="transparent" name="wmode">
11                 </object>
12</div>

如上,div(绿色,zindex:9),iframe(红色,zindex:1),object三者的层级关系。

修改div的背景,添加边框,修改iframe的背景后,如上,div(红色边框透明,zindex:9),iframe(透明,zindex:1),object三者的层级关系。

 最后:似乎第二种方案并不可行,只能修改成通过不在object元素范围内的元素控制大小的方案,比如在页面里添加个button并绑定事件或者重写控件添加交互事件。

转载于:https://www.cnblogs.com/luanfujian/p/9324801.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/427432.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

cad钣金展开插件_钣金高级工考试大小头手工展开图步骤教程

提醒&#xff1a;点上方↑↑↑“钣金学习网”免费关注简单方法一: 等分弧画法简单方法二: 角度计算画法1、先画一条中心直线&#xff0c;在线上取一点A&#xff0c;过&#xff21;点画一条与中心线垂直相交线。量取大头半径以&#xff21;点为起点在相交线上标注一点&#…

介绍一个新鲜玩意 开源的杀毒软件

有“免费的午餐”我们为什么不吃呢&#xff1f;杀毒软件一定要购买或用D版吗&#xff1f;先别忙着下结论&#xff0c;请耐心看完本文&#xff0c;然后再告诉我你是怎么想的。&#xff08;一&#xff09;、ClamWin Free Antivirus 开源反病毒软件 GPL协议SourceForge页面&#x…

没有可用软件包 jenkins。_Jenkins分布式构建与并行构建

Jenkins分布式构建与并行构建 jenkins的架构 Jenkins采用的是“masteragent&#xff08;slave&#xff09;”架构。Jenkins master负责提供界面、处理HTTP请求及管理构建环境&#xff1b;构建的执行则由Jenkins agent负责 Jenkins agent的横向扩容&#xff1a;只需要增加agent就…

qstring去掉特定字符_如何花式、批量且操作简单地处理字符?

文本字符的规范化&#xff0c;是批量处理的前提。多来源数据或是数据收集本身就必然存在不规范情况&#xff0c;于是批量地完成它就成了常见的需求。对于花式批量处理&#xff0c;自然要说到正则表达式。“正则表达式是对字符串操作的一种逻辑公式&#xff0c;就是用事先定义好…

性能度量RMSE

回归问题的典型性能度量是均方根误差&#xff08;RMSE:Root Mean Square Error&#xff09;。如下公式。 m为是你计算RMSE的数据集中instance的数量。x(i)是第i个实例的特征值向量 ,y(i)是其label&#xff08;期望的模型输出&#xff09;。如下&#xff1a;X是包含了所有实例的…

【数学建模】day02-整数规划

基本类似于中学讲的整数规划--线性规划中变量约束为整数的情形。 目前通用的解法适合整数线性规划。不管是完全整数规划(变量全部约束为整数)&#xff0c;还是混合整数规划(变量既有整数又有实数)&#xff0c;MATLAB都提供了通用的求解函数。 一、0-1型整数规划 这类规划将变量…

VMware的linux虚拟机实现和windows的文件共享

使用的centos7和windows10&#xff0c;在虚拟机centos7中是root身份。由于是第一次用没有界面的linux&#xff0c;可谓是困难重重…… 一 打开VMware&#xff0c;然后选中你的虚拟机&#xff0c;我的是centos7。然后点击工具栏”虚拟机“&#xff0c;然后选择”安装VMware tool…

javascript进制转换_「js基础」JavaScript逻辑和位运算符归纳

上一篇文章呢&#xff0c;我们讲述了JavaScript运算符中的关系运算符和逻辑运算符&#xff0c;那么紧接上一篇的文章我们今天来说说逻辑运算符。引言逻辑运算符不是很难&#xff0c;也不是很多&#xff0c;我们只要记住三个就可以啦&#xff01;分别是&#xff1a;&#xff01;…

〖强暴贴〗号称全国最大开发者网络的CSDN多次出现低级错误 验证码形同虚设 开发人员竟是MVP

分享一下我老师大神的人工智能教程。零基础&#xff01;通俗易懂&#xff01;风趣幽默&#xff01;还带黄段子&#xff01;希望你也加入到我们人工智能的队伍中来&#xff01;https://blog.csdn.net/jiangjunshow主  题&#xff1a;【醒目】〖强暴贴〗号称全国最大开发者网络…

弟子规python编程游戏_《Python游戏趣味编程》 第11章 消灭星星

知乎视频​www.zhihu.com图书简介可以看这里&#xff1a;童晶&#xff1a;《Python游戏趣味编程》新书上架了​zhuanlan.zhihu.com消灭星星是一款非常容易上瘾的消除类游戏&#xff0c;只需点击一个方块&#xff0c;如果和其连接的有两个或两个以上颜色相同的方块即可消除&…

python判断英文字母_python判断字符串中是否含有英文 | 个人学习笔记记录

第一种方法&#xff1a; #-*- coding:utf-8 -*- import re def check(str): my_re re.compile(r[A-Za-z],re.S) res re.findall(my_re,str) if len(res): print u含有英文字符 else: print u不含有英文字符 if __name__ __main__: str 你好123hello check(str) str1 你好1…

idea ssm项目移包报错问题

写完代码之后发现包结构太乱了 想要规划一下 结果报错 这里面的包路径都可以点进去&#xff0c;还是报找不到com.lf.company.entity.Business 后来发现是 在移动前和移动后都存在这个mapper。xml 解决方案&#xff1a; 在这里把多余的删掉转载于:https://www.cnblogs.com/NCL…

matlab 写excel 慢_吐槽一下MATLAB的workspace

用MATLAB编程&#xff0c;或者Simulink建模仿真&#xff0c;有一个特别强大、特别人性化的功能&#xff0c;可以在workspace中直接查看定义的参数和运行的结果 无论是仿真的调试&#xff0c;结果的分析&#xff0c;或是中途的Debug&#xff0c;workspace都发挥着至关重要的作用…

MATLAB 图形着色

1.matlab中的颜色查找表函数&#xff1a; &#xff08;1&#xff09;autumn&#xff1a;从红色向橘黄色、黄色平稳过渡&#xff1b; &#xff08;2&#xff09;bone:为含有较高的蓝色组分的gray颜色查找表&#xff1b; &#xff08;3&#xff09;colorcube&#xff1a;包含RGB颜…

大学python笔记_Python 上手笔记

要是想在键盘上体验一下, 安装Python也很简单: 基本的编译环境应该已经包括了Python&#xff0c;但Mac系统最好在上面这个网站下载安装。在Linux系统中可以使用apt-get等工具来安装更新。另外假如系统内有多个Python版本&#xff0c;可能需要将Python的路径添加到配置文件&…

D - F e n d 簡 單 教 學 DOSBOX Easy Shell 【玩DOS游戏的必备软件】

分享一下我老师大神的人工智能教程。零基础&#xff01;通俗易懂&#xff01;风趣幽默&#xff01;还带黄段子&#xff01;希望你也加入到我们人工智能的队伍中来&#xff01;https://blog.csdn.net/jiangjunshowD - F e n d 簡 單 教 學■寫 在 前 面自去年無意間接觸到DOSBox…

arma模型谱估计matlab_基于机器学习的心律失常分类(四)——心电信号特征提取[MATLAB]...

目前比较常用的特征提取是提取心电信号的各波形间期长度、波峰高度等&#xff0c;本文是使用ARMA模型对心电信号进行处理&#xff0c;使用其系数来作为特征。一、心拍划分大多伴有异常波形的心律失常信号&#xff0c;通常都会具体表现在单个心拍中&#xff0c;需要对信号进行心…

目睹DNS怪现状 本地对DNS的设定故障分析

分享一下我老师大神的人工智能教程。零基础&#xff01;通俗易懂&#xff01;风趣幽默&#xff01;还带黄段子&#xff01;希望你也加入到我们人工智能的队伍中来&#xff01;https://blog.csdn.net/jiangjunshowDNS&#xff08;Domain Name System&#xff09;在tcp/ip网络中&…

python文件输入符_python文件IO与file操作

1 标准输入输出IO - (1) 打印到屏幕 print() print(self, *args, sep’ ‘, end’n’, fileNone): 把传递的表达式 转换成一个 字符串表达式 known special case of print """ print(value, ..., sep , endn, filesys.stdout, flushFalse) Prints the values to…

和县机电工程学校工业机器人_【校企合作】学校举行工业机器人教学系统捐赠仪式...

点击上方蓝字关注我们12月22日下午&#xff0c;我校与广东诚飞智能科技有限公司在公共实训中心会议室举行了“工业机器人教学系统”捐赠仪式。广东诚飞智能科技有限公司总经理杨成芳、区域经理杨少杰&#xff0c;学校副校长罗红金、教务科科长冯华以及机电专业组教师代表参加了…